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

Question

假设您有以下HTML：

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

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

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

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

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

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

您可以在jsFiddle中看到这一点。对于IE8，请查看these instructions如何让jsFiddle工作，但它看起来像这样：

Answer 1

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

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

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

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

最佳解决方案是将type="text"添加到文本输入中，然后使用原始选择器。

Answer 2

一种痛苦但可靠的方法是简单地设置样式

input {
    /* ... */
}

哪个会针对每个浏览器中的文本输入，然后您可以执行您正在执行的操作，并定位不是文本输入的每种输入类型：

input[type=range] {}
input [type=phone] {}
// etc.

这样，即使浏览器不支持CSS3中的：not运算符，您仍然可以使其工作......

Answer 3

我的建议是将输入的默认样式设为

input {
    background-color: red;
}

然后根据需要覆盖其他内容的样式，例如蓝色按钮

input[type='button'] {
    background-color: blue;
}

当然你需要为特定的输入类型指定特定的样式，但这并不意味着如果你想要一个独特的按钮，你就不会这样做。

Answer 4

使用类和CSS设置输入样式：

.redBG
{
    background: red;
}

然后你的HTML是：

<input class="redBG" />

附上jsFiddle。