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

【问题标题】：How to add css for specific input type text如何为特定输入类型文本添加 css
【发布时间】：2012-05-22 06:57:38
【问题描述】：

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

请帮忙:-)

【问题讨论】：

css selectors
What HTML/CSS would you use to create a text input with a background?的可能重复
@Musa -- 这个更容易阅读。 net.tutsplus.com/tutorials/html-css-techniques/…

标签： html css input field

【解决方案1】：

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

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

【讨论】：

在这种情况下 html_name 是 firstName/lastName
但是您应该在值周围加上引号（不确定它是否可以正常工作）。就像input[type="text] - 这就是我一直使用它的方式..
@DRP96 实际上是对的，我只是写了一个通用语句（应该隐式添加引号）。
我不知道为什么这个答案没有被接受。

【解决方案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 选择器指定的样式。

【讨论】：

这行得通，但使用 ID 设置样式通常是不好的做法。下面的答案是完成 OP 正在尝试执行的任务的更好方法。
我不同意。将 CSS 应用于 ID 而不是类正是针对这种情况——一次性的。不要抽象一个单独的用例！

【解决方案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');
}

祝你好运！

【讨论】：

【解决方案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;
}

【讨论】：

【解决方案5】：

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

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

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

【讨论】：