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.