如何添加CSS为特定输入类型的文本(How to add css for specific inpu

当我尝试添加使用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

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:

使用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 2:

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

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

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:

一个“身份证”的标签添加到您的每一个输入：

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

然后你可以使用#selector在CSS抓住每一个。

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>

文章来源: How to add css for specific input type text