Cool Radio Buttons, Checkboxes, and Select Fields

JavaScript and client side scripting.

Moderator: General Moderators

Post Reply
User avatar
volomike
Forum Regular
Posts: 633
Joined: Wed Jan 16, 2008 9:04 am
Location: Myrtle Beach, South Carolina, USA

Cool Radio Buttons, Checkboxes, and Select Fields

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