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

【问题标题】：How can I target text input fields with CSS?如何使用 CSS 定位文本输入字段？
【发布时间】：2013-07-15 23:43:37
【问题描述】：

假设您有以下 HTML：

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

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

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

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

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

那么我怎样才能定位所有文本输入字段，并且只定位文本输入字段，而不必将type=text 放在任何地方？

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

【问题讨论】：

【解决方案1】：

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

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

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

最好的解决方案是检查并将type="text" 添加到您的文本输入中，然后使用您原来的选择器。

【讨论】：

【解决方案2】：

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

input {
    /* ... */
}

这将针对每个浏览器中的文本输入，然后您可以做您正在做的事情，并针对不是文本输入的每一种输入类型：

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

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

【讨论】：

【解决方案3】：

我的建议是输入的默认样式是

input {
    background-color: red;
}

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

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

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

【讨论】：

【解决方案4】：

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

.redBG
{
    background: red;
}

那么你的 HTML 是：

<input class="redBG" />

【讨论】：