17

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

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

请帮忙 ：-）

4

5 回答 5

87

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

input[type=text] {
    //styling
}
input[name=html_name] {
    //styling
}
于 2012-05-14T18:54:17.997 回答
8

使用 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 选择器指定的样式。

于 2012-05-14T18:57:32.233 回答
5

您必须更改 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');
}

祝你好运！

于 2013-02-13T13:13:53.133 回答
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;
}
于 2012-05-14T18:55:19.850 回答
1

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

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

    <body>
        <input class="classnamehere" type="text" name="firstName" />
    </body>
</html>
于 2015-04-07T18:52:55.293 回答