<input type="?" 的 CSS 选择器

Question

CSS 有没有办法根据输入的类型来定位所有输入？我有一个用于各种禁用表单元素的禁用类，我正在为文本框设置背景颜色，但我不希望我的复选框获得那种颜色。

我知道我可以使用单独的类来做到这一点，但如果可能的话，我宁愿使用 CSS。我确定，我可以在 javascript 中设置它，但要再次寻找 CSS。

我的目标是 IE7+。所以我不认为我可以使用 CSS3。

编辑

使用 CSS3 我可以做类似的事情吗？

INPUT[type='text']:disabled 那会更好地完全摆脱我的班级...

编辑

好的，感谢您的帮助！所以这是一个选择器，它可以修改所有已禁用的文本框和区域，而无需设置任何类，当我开始这个问题时，我从未想过这是可能的......

INPUT[disabled][type='text'], TEXTAREA[disabled]
{   
    background-color: Silver;
}

这在 IE7 中有效

Answer 1

是的。 IE7+ 支持属性选择器：

input[type=radio]
input[type^=ra]
input[type*=d]
input[type$=io]

具有属性类型的元素输入，它包含一个等于、开始、包含或结束于某个值的值。

其他安全 (IE7+) 选择器有：

• 父级 > 具有：p > span { font-weight: bold; } 的子级
• 前面有 ~ 元素，即：span ~ span { color: blue; }

<p><span/><span/></p> 会有效地给你：

<p>
    <span style="font-weight: bold;">
    <span style="font-weight: bold; color: blue;">
</p>

进一步阅读： Browser CSS compatibility on quirksmode.com

我很惊讶其他人都认为这是不可能的。 CSS 属性选择器已经出现了一段时间。我想是时候清理我们的 .css 文件了。

Answer 2

可悲的是，其他海报是正确的，你是正确的 ...实际上，正如 kRON 更正的那样，你对你的 IE7 和严格的文档没问题，但是 我们大多数人 对 IE6 的要求被简化为 JS 或类引用，但它是一个 CSS2 属性，只是一个没有 IE^h^h 浏览器足够支持的属性。

出于完整性考虑，类型选择器 - 类似于 xpath - 形式为 [attribute=value]，但存在许多有趣的变体。当它可用时，它将非常强大，记住 IE8 是件好事。

• w3 reference

• browser support reference

Answer 3

你可以用 jQuery 做到这一点。使用它们的选择器，您可以按属性进行选择，例如类型。但是，这确实要求您的用户打开 Javascript，并下载一个额外的文件，但如果它有效...

Answer 4

抱歉，简短的回答是否定的。 CSS (2.1) 只会标记 DOM 的元素，而不是它们的属性。您必须为每个输入应用一个特定的类。

我知道这很糟糕，因为那将非常有用。

我知道你说过你更喜欢 CSS 而不是 JavaScript，但你仍然应该考虑使用 jQuery。它提供了一种非常简洁优雅的方式来根据属性向 DOM 元素添加样式。