How do I apply styling to <form> elements?

Using css element selectors not classes or ids

[grahamstewart]

Has anyone had any luck devising selectors for form elements that will let people style the various elements of the form?

My particular problem is that I'd like to give all my text inputs a redish border (to match the background of the coloured form). Some of them should also have large text.

At the moment I use these rules..

form.coloured input, form.coloured textarea {
border: 1px solid #f2bba7;
}
form input.largetext {
font-size: 150%;
}

which worked just great until I discovered that IE doesn't handle <button> properly [webmasterworld.com]. :(

So now I need to use the <input type="submit"> buttons instead, which get affected by the border rule above and look horrible.

Is there anyway to target the rule at text input only without using classes/id?
Or do I have to go through all my forms and add a class to all the text inputs?

I tried the input[type="text"] selector but that doesn't seem to work. :(

[DrDoc]

CSS3 selectors are not supported by IE6 (maybe in IE9 ;))

So, I'm afraid the best option is to use either a class or ID for the button. I usually use .button. Then you can always style it the way you want, reset previous borders/styles too if needs be :)

[grahamstewart]

Grrr.. I was afraid of that.

Okay, if I just add a .button class to my buttons then is there any way to return the button border to its default 'buttony' look?

BTW: input[type="text"] is not a CSS3 selector, attribute selectors [w3.org] are in the CSS2 spec.

Just not actually suppported by Microsoft apparently. :(

[papabaer]

CSS3 selectors are not supported by IE6 (maybe in IE9 ;))

LOL! Hey DrDoc! aren't you rushing IE a bit? Maybe IE19.... IE, the new NN4!

Attribute selectors will make managing style soooo much easier. I use some now, but only for non-critical items.

Where I would LOVe to use them is in this situation:

a[href] {some:style;}

I use a number of anchors for reference/content (<a id="def-sound-sampling">Sound sampling</a>) The ability to style only anchors that have the "href" attribute would allow me to eliminate a .class that currently allows me to differentiate between the two types.

Opera and Mozilla(family) support attribute selectors very nicely! While IE.... well....!

[grahamstewart]

Opera and Mozilla(family) support attribute selectors very nicely! While IE.... well....!

Yup, I use this one in my print stylesheets..

a.external:after {
content: " (" attr(href) ") ";
font-size: 90%;
}

It adds in the address of the link in brackets after the link text. Works great in Opera, but not IE. I leave it in there in the hope that IE will eventually support it.