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

Question

假设您有以下 HTML：

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

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

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

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

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

那么如何定位所有文本输入字段，并且只针对文本输入字段，而不必type=text到处放置呢？

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

在此处输入图像描述

score 16 · Accepted Answer

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

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

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

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

score 1 · Accepted Answer

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

input {
    background-color: red;
}

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

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

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

score 1 · Accepted Answer

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

input {
    /* ... */
}

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

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

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

score 0 · Accepted Answer

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

.redBG
{
    background: red;
}

那么你的 HTML 是：

<input class="redBG" />

附加jsFiddle。

4 回答 4