如何使用CSS为一个输入框类型添加样式而不影响其他输入框类型

Question

有没有一种方法可以编写样式规则，只影响文本字段。假设我有以下内容：

<div id="helloDiv">
<input type="text" name="something" /><br />
<input type="checkbox" name="somethingElse" /><br />
<input type="submit" name="go" />
</div>

div#helloDiv input {
   border: 1px solid red;
}

上述CSS规则的问题在于它会影响所有输入字段，不仅限于文本输入框，还包括单选按钮、提交按钮等。

那么有没有跨浏览器的解决方案，只影响div或其他页面元素中的一种输入字段类型（而不是分别为每个输入字段分配样式）呢？

- James

Answer 1

最繁琐但兼容IE6的方法是给所有的input type="text"元素添加特定的CSS类，例如class="text"，然后仅针对该类进行目标设置：

div#helloDiv input.text {
    /* Styles */
}

最简单的方式是使用CSS2.1，但这种方法不兼容IE6。

div#helloDiv input[type="text"] {
    /* Styles */
}

不需要修改您的HTML。

补充说明：根据animuson的评论，选择其中一个。决定是否需要或想要支持IE6，并采取适当的代码。

- BoltClock

---

有点自大，但是感谢@Mark和其他给我点赞帮我突破1k声望的人：P - BoltClock

第一种方法实际上不适用于我正在使用的最新版本的火狐浏览器。但第二种方法可以。 - James

它应该可以工作。确保包括type和class属性：<input type="text" class="text" name="something" /> - BoltClock

@James：那你做错了...而且，你永远不应该同时实现它们，那太冗余了。这就像在该元素上应用两个完全相同的类。要么说“去他妈的IE6”，并使用属性选择器，要么使用类名，不要同时使用两者。 - animuson

哦，不用在意，我实现它的方式错了。我没有添加 class="text"。一开始我并不想使用它，所以我选择方法2。 - James

Answer 2

input[type=text] {}

这段代码在IE6中不兼容，但是在大多数其他浏览器中可以正常运行。如果想要完全实现跨浏览器兼容，你需要给相同类型的所有输入框应用一个公共类，或者使用JavaScript。详情请参见这里。

- James Skidmore

Answer 3

你可以使用一个属性选择器，看起来像这样:

input[type=text] {
  /* stuff */
}

现在，对于古老的IE6不再提供支持。因此，许多人只能咬紧牙关并为其输入框添加类来进行样式设置。然后，您可以将通用样式应用于输入框，然后针对特定类型进行更改。例如：

input { /* common styles */ }
input.mySubmit { /* only submit */ }
input.myText { /* only text */ }

- artlung