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

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;
}

和这个css的第二个(lastName)

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');
} 

祝你好运!