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

I have written an article with some detailed info about CSS attribute selectors. — Sarfraz
– Sarfraz, Commented Apr 1, 2010 at 6:15

Filip Dupanović · Accepted Answer · 2014-07-09 00:13:10Z

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.

Ok I had tried this but it didn't work now it is working so I must have my syntax messed up.
You just made my day! Now if you want to make my week tell me it can be done in IE6 without using Expressions hehe:-) j/k there
Unfortunately it can't. I stopped supporting IE6 out of religious views and suggest we all do too. Today I use the IE conditional comment to tell users that their computer and privacy is at risk for using IE6 and that they should upgrade immediately :P
I guess I'm so used to supporting IE6 I just assumed it wouldn't work in IE7 either
I wish I could stop supporting IE6 but I can't and I can't do as you suggested...But I really really really wish I could;-)

annakata · Accepted Answer · 2009-01-22 21:39:02Z

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

You have a more updated browser support reference? That is based on IE7 beta would love to see IE8
IE8 is still in beta, but quirksmode says "yes": quirksmode.org/css/contents.html
I'm still supporting IE6 just not this added tiny visual tweak.
fair enough, it was my mistake to answer based on the title, I tend to answer general cases - I really should read questions more :)

cdeszaq · Accepted Answer · 2009-01-22 20:47:33Z

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

Phil.Wheeler · Accepted Answer · 2009-01-22 20:43:48Z

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.

Afaict, this answer is incorrect (the CSS 2.1 part): w3.org/TR/CSS21/selector.html#attribute-selectors. If not, then please clarify you answer.
Sorry - you're quite right. I just expect the least from IE7 because so often developers are still required to support IE6 at the same time. Should've read the question more carefully and done my homework.

Collectives™ on Stack Overflow

CSS Selector for <input type="?"

4 Answers 4

6 Comments

4 Comments

Comments

3 Comments

Linked

Hot Network Questions