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

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.

Answer 2

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

Answer 3

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

Answer 4

Yes. IE7+ supports attribute selectors:

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

Element input with attribute type which contains a value that is equal to, begins with, ends with or contains a certain value.

Other safe (IE7+) selectors are:

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

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 5

Here is some detailed info about CSS selectors