CSS Selector for <input type="?"

Question

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.

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.

I'm targeting IE7+. So i don't think I can use CSS3.

Edit

With CSS3 I would be able to do something like?

INPUT[type='text']:disabled that would be even better get rid of my class altogether...

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

Answer 1

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.

Answer 2

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.

• w3 reference

• browser support reference