CSS and checkboxes, textareas, and radio buttons

[choazart]

Hello all,

After lengthy google sessions and here at Sitepoint, there seems to be no way to CSS some <form> elements such as checkboxes, radio buttons, and text areas.

Is there no one who knows of a way to do this?

I've tried to create styles for these <form> elements with zero success.

There's got to be a way.

Mike

[cwebmedia]

Here is a quick tutorial!

[choazart]

Thanks for the quick reply.

Perhaps I should have been more specific...

I want to apply the same CSS formatting to my textareas and checkboxes as I did my texboxes.

Specifically, the border colors and not the background colors.

Thanks again,

Mike

[19nine78]

what browser and what styles? Textareas shouldn't be a problem, but checkboxes and radios are.

cheers

alastair

[Utopia]

Originally posted by cwebmedia
Here is a quick tutorial!

why thankyou!

[vgarcia]

Checkboxes and radio buttons are problems, as the background colors are OUTSIDE of the "box" area when you style them, not inside. Selects have a problem with borders.

--Vinnie

[redux]

http://www.sitepointforums.com/showt...threadid=79682
http://www.sitepointforums.com/showt...threadid=87386
http://www.sitepointforums.com/showt...threadid=87818

but yes, the short and sweet answer is: it can't be done (at least not in a standards-compliant, accessible way)

[Michel V]

Originally posted by vgarcia
Checkboxes and radio buttons are problems, as the background colors are OUTSIDE of the "box" area when you style them, not inside. Selects have a problem with borders.

Not so in Gecko-based browsers, where the background is inside the checkbox or radio button (still, you can't modify these buttons' borders).

[Ian Glass]

Originally posted by Michel V
Not so in Gecko-based browsers, where the background is inside the checkbox or radio button (still, you can't modify these buttons' borders).

As it is in Opera 7 BETA. But background-images are applied outside the "bound" (for lack of a better word--all the other are taken!) of the radio buttons and checkboxes. And borders go around the whole element's box (and CSS is box-based after all).

Also, instead of using classes you can use attribute selectors like:

input[type=radio] { /* ... */ }
input[type=text] { /* ... */ }
input[type=checkbox] { /* ... */ }

And the like. :-)

~~Ian