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

Question

假设您有以下HTML:

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

当然,在我的HTML中我也会有其他类型的输入字段(复选框等).现在我只想设置文本输入的样式.

我在搜索时发现的是在CSS中执行以下操作:

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

对于第二个输入,显式存在属性,这是有效的.然而,对于第一个,它适用于IE8,但不适用于IE10.也不在Chrome中.

那么我如何定位所有文本输入字段,只有文本输入字段,而不必放在type=text任何地方？

你可以在jsFiddle中看到这个.对于IE8,请查看有关如何使jsFiddle工作的这些说明,但它看起来像这样:

Answer 1

如果您希望能够省略type="text"并且仍然具有选择器匹配,则必须使用notCSS3中提供的psuedoselector:

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

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

这在IE的较低版本中不起作用,因为CSS3在这些浏览器中不受支持.

最好的解决方案是通过并添加type="text"到您的文本输入并只使用您的原始选择器.