<input type="?" 的 CSS 选择器
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/470702/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
CSS Selector for <input type="?"
提问by JoshBerke
Is there any way with CSS to target all inputs based on their type? I have a disabled class I use on various disabled form elements, and I'm setting the background color for text boxes, but I don't want my checkboxes to get that color.
CSS 有什么方法可以根据输入的类型定位所有输入吗？我有一个用于各种禁用表单元素的禁用类，并且我正在为文本框设置背景颜色，但我不希望我的复选框获得该颜色。
I know I can do this with seperate classes but I'd rather use CSS if possible. I'm sure, I can set this in javascript but again looking for CSS.
我知道我可以用单独的类来做到这一点，但如果可能的话，我宁愿使用 CSS。我敢肯定，我可以在 javascript 中设置它，但再次寻找 CSS。
I'm targeting IE7+. So i don't think I can use CSS3.
我的目标是 IE7+。所以我不认为我可以使用 CSS3。
Edit
编辑
With CSS3 I would be able to do something like?
使用 CSS3，我可以做类似的事情？
INPUT[type='text']:disabledthat would be even better get rid of my class altogether...
INPUT[type='text']:disabled那会更好地完全摆脱我的班级......
Edit
编辑
Ok thanks for the help! So here's a selector which modifies all textboxes and areas which have been disabled without requiring setting any classes, when I started this question I never thought this was possible...
好的谢谢你的帮助！所以这里有一个选择器，它可以修改所有已禁用的文本框和区域，而无需设置任何类，当我开始这个问题时，我从没想过这是可能的......
INPUT[disabled][type='text'], TEXTAREA[disabled]
{
background-color: Silver;
}
This works in IE7
这适用于 IE7
回答by Filip Dupanovi?
Yes. IE7+ supports attribute selectors:
是的。IE7+ 支持属性选择器：
input[type=radio]
input[type^=ra]
input[type*=d]
input[type$=io]
Element input with attribute type which contains a value that is equal to, begins with, contains or ends with a certain value.
具有属性类型的元素输入，其中包含等于、开始于、包含或结束于某个值的值。
Other safe (IE7+) selectors are:
其他安全 (IE7+) 选择器是：
- Parent > child that has:
p > span { font-weight: bold; } - Preceded by ~ element which is:
span ~ span { color: blue; }
- 父 > 子具有：
p > span { font-weight: bold; } - 前面是 ~ 元素，它是：
span ~ span { color: blue; }
Which for <p><span/><span/></p>would effectively give you:
哪个 for<p><span/><span/></p>会有效地给你：
<p>
<span style="font-weight: bold;">
<span style="font-weight: bold; color: blue;">
</p>
Further reading: Browser CSS compatibility on quirksmode.com
进一步阅读： quirksmode.com 上的浏览器 CSS 兼容性
I'm surprised that everyone else thinks it can't be done. CSS attribute selectors have been here for some time already. I guess it's time we clean up our .css files.
我很惊讶其他人都认为这是不可能的。CSS 属性选择器已经存在一段时间了。我想是时候清理我们的 .css 文件了。
回答by annakata
Sadly the other posters are correct that you're...actually as corrected by kRON, youare ok with your IE7 and a strict doc, but most of uswith IE6 requirements are reduced to JS or class references for this, but it isa CSS2 property, just one without sufficient support from IE^h^h browsers.
可悲的是，其他海报是正确的，你......实际上是由 kRON 纠正的，你对 IE7 和严格的文档没问题，但我们大多数有 IE6 要求的人都被简化为 JS 或类引用，但它是一个 CSS2 属性，只是一个没有 IE^h^h 浏览器足够支持的属性。
Out of completeness, the type selector is - similar to xpath - of the form [attribute=value]but many interesting variants exist. It willbe quite powerful when it's available, good thing to keep in your head for IE8.
出于完整性考虑，类型选择器 - 类似于 xpath - 的形式，[attribute=value]但存在许多有趣的变体。这将是相当强大的，当它的面世，好东西留在你的头IE8。
回答by cdeszaq
You can do this with jQuery. Using their selectors, you can select by attributes, such as type. This does, however, require that your users have Javascript turned on, and an additional file to download, but if it works...
你可以用 jQuery 做到这一点。使用它们的选择器，您可以按属性进行选择，例如类型。但是，这确实需要您的用户打开 Javascript 并下载额外的文件，但如果它有效...
回答by Phil.Wheeler
Sorry, the short answer is no. CSS (2.1) will only mark up the elements of a DOM, not their attributes. You'd have to apply a specific class to each input.
抱歉，简短的回答是否定的。CSS (2.1) 只会标记 DOM 的元素，而不是它们的属性。您必须对每个输入应用特定的类。
Bummer I know, because that would be incredibly useful.
我知道无赖，因为那会非常有用。
I know you've said you'd prefer CSS over JavaScript, but you should still consider using jQuery. It provides a very clean and elegant way of adding styles to DOM elements based on attributes.
我知道你说过你更喜欢 CSS 而不是 JavaScript，但你仍然应该考虑使用 jQuery。它提供了一种基于属性向 DOM 元素添加样式的非常干净和优雅的方式。
