Question

当我尝试使用css

添加一些输入字段时

我遇到了问题

我无法为某些输入字段创建多个CSS

这是我有的字段

<input type="text" name="firstName" />
<input type="text" name="lastName" />

和css是

input
{
   background-image:url('images/fieldBG.gif');
   background-repeat:repeat-x;
   border: 0px solid;
   height:25px;
   width:235px;
}

我想用这个css

创建第一个字段（firstName）

input
{
   background-image:url('images/fieldBG.gif');
   background-repeat:repeat-x;
   border: 0px solid;
   height:25px;
   width:235px;
}

和第二个（lastName）有这个css

input
{
   background-image:url('images/fieldBG2222.gif');
   background-repeat:repeat-x;
   border: 0px solid;
   height:25px;
   width:125px;
}

请帮助： - ）

Answer 1

您可以使用CSS按类型或命名表单元素进行样式设置。

input[type=text] {
    //styling
}
input[name=html_name] {
    //styling
}

Answer 2

使用ID选择器。

CSS：

input{
    background-repeat:repeat-x;
    border: 0px solid;
    height:25px;
    width:125px;
}

#firstname{
    background-image:url('images/fieldBG.gif');
}
#lastname{
    background-image:url('images/fieldBG2222.gif');
}

HTML：

<input type="text" ID="firstname" name="firstName" />    
<input type="text" ID="lastname" name="lastName" />

所有输入都将使用通用输入样式设置样式，两个特殊输入将具有ID选择器指定的样式。

Answer 3

您必须更改HTML文件：

<input type="text" name="firstName" /> 
<input type="text" name="lastName" />

...为：

<input type="text" id="FName" name="firstName" />
<input type="text" id="LName" name="lastName" />

并将您的CSS文件修改为：

input {
    background-repeat:repeat-x;
    border: 0px solid; 
    height:25px; 
    width:125px;
}


#FName {
    background-image:url('images/fieldBG.gif');
}


#LName {
    background-image:url('images/fieldBG2222.gif');
}

最好的运气！

Answer 4

为每个输入添加“id”标记：

<input type="text" id="firstName" name="firstName" />
<input type="text" id="lastName" name="lastName" />

然后你可以使用CSS中的#selector来抓取每一个。

input {
  background-repeat:repeat-x; 
  border: 0px solid;
  height:25px;
}

#firstName {
  background-image:url('images/fieldBG.gif');
  width:235px;
}

#lastName {
  background-image:url('images/fieldBG2222.gif');
  width:125px;
}

Answer 5

使用类来设置样式。他们是更好的解决方案。使用类可以单独设置每种输入类型的样式。

<html>
    <head>
        <style>
            .classnamehere {
                //Styling;
            }
        </style>
    </head>

    <body>
        <input class="classnamehere" type="text" name="firstName" />
    </body>
</html>

如何为特定输入类型文本添加css

5 个答案: