如何使用 CSS 定位文本输入字段？

假设您有以下 HTML：

<input />
<br />
<input type=text />

当然，在我的 HTML 中，我还会有其他类型的输入字段（复选框等）。现在我只想设置文本输入的样式。

我在搜索时发现，在 CSS 中执行以下操作：

input[type=text] { background: red; }

对于第二个输入，当属性明确存在时，这是有效的。然而，对于第一个，它可以在 IE8 中运行，但不能在 IE10 中运行。 Chrome 中也没有。

那么我如何才能定位所有文本输入字段，并且仅定位文本输入字段，而不必将type=text到处？

您可以在jsFiddle http://jsfiddle.net/dByqP/。对于 IE8，请查看这些说明 https://stackoverflow.com/questions/15260947/why-jsfiddle-is-not-rendering-at-all-in-ie8-and-older-versions关于如何让 jsFiddle 工作，但它看起来像这样：

如果您希望能够省略type="text"并且仍然有选择器匹配，您将不得不使用notCSS3 中可用的伪选择器：

input[type="text"], input:not([type]) {
    ...
}

http://jsfiddle.net/dByqP/5/ http://jsfiddle.net/dByqP/5/

这在较低版本的 IE 中不起作用，因为这些浏览器不能很好地支持 CSS3。

最好的解决方案是遍历并添加type="text"到您的文本输入，只需使用您的原始选择器。