Page 1 of 1

Cool Radio Buttons, Checkboxes, and Select Fields

Posted: Sat Jun 07, 2008 12:30 am
by volomike
You probably already know how to style your textboxes (input type=text and textarea) with a border and a background. But now you can do something interesting at least in Firefox. I think IE supports styling of radio buttons and checkboxes and select fields in their own way, and probably so too does Opera, and with conditional comments and a little Javascript you can let IE 6, IE 7, Safari, and Opera load their own CSS for these. I'll let you look that one up.

But for Firefox, you can run the following and it won't hurt what you've got set up for IE 6, IE 7, Safari, and Opera. Check this out:

Next time you style a checkbox or a select box, take a look at this trick:

-moz-outline: 1px solid #BBB;
-moz-border-top-colors: #EEE;
-moz-border-right-colors: #FFF;
-moz-border-bottom-colors: #FFF;
-moz-border-left-colors: #EEE;

And for radio buttons, consider this:

-moz-outline: 1px solid #BBB;
-moz-outline-radius: 60%;
-moz-border-top-colors: #EEE;
-moz-border-right-colors: #FFF;
-moz-border-bottom-colors: #FFF;
-moz-border-left-colors: #EEE;

Edit: Changed some #FFF to #EEE. Duh. Don't know why I had it the other way, previously.