用于 < input type = “ ?”的 CSS 选择器

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

我知道我可以用不同的类来做这件事，但是如果可能的话，我宁愿使用 CSS。我确信，我可以在 javascript 中设置它，但是还是要寻找 CSS。

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

剪辑

有了 CSS3我能做些什么呢？

如果能把我的课全部取消就更好了。

剪辑

好的，谢谢你的帮助！这里有一个选择器，它可以修改所有的文本框和禁用的区域，不需要设置任何类，当我开始这个问题，我从来没有想过这是可能的..。

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

这在 IE7中是可行的

140447 次浏览
小开

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.

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.

小开

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...

小开

Sadly the other posters are correct that you're ...actually as corrected by kRON, you are ok with your IE7 and a strict doc, but most of us with IE6 requirements are reduced to JS or class references for this, but it is a CSS2 property, just one without sufficient support from IE^h^h browsers.

Out of completeness, the type selector is - similar to xpath - of the form [attribute=value] but many interesting variants exist. It will be quite powerful when it's available, good thing to keep in your head for IE8.

小开
最佳答案

Yes. IE7+ supports attribute selectors:

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:

  • Parent > child that has: p > span { font-weight: bold; }
  • Preceded by ~ element which is: span ~ span { color: blue; }

Which for <p><span/><span/></p> would effectively give you:

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

Further reading: Browser CSS compatibility on quirksmode.com

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.


提交答案