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或其他页面元素中的一种输入字段（不需要单独分配输入字段样式）。

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，并采用适当的代码。

Answer 2

input[type=text] {}

它在IE6中不兼容，但大多数其他浏览器。要使其完全跨浏览器兼容，您需要将公共类应用于相同类型的所有输入或使用JavaScript。请参阅here。

Answer 3

您可以使用attribute selector，如下所示：

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

现在，支持does not extend to Ye Olde IE6。因此，许多人只是咬紧牙关并在他们的输入中添加类来设计它们。然后，您可以为输入设置常用样式，然后针对特定种类进行更改。所以，像：

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

如何设置一种类型的输入字段，而不影响CSS的其他输入类型

3 个答案: