Styling Forms

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-left-colors: #EEE;
-moz-border-right-colors: #FFF;
-moz-border-bottom-colors: #FFF;

It might work in Opera, but I know it works for sure on Firefox. It won't work in IE, but then again it won't error out on IE and you can actually style these elements in IE6 and 7 another way, I thought.

And for radio buttons, consider this:

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

For textboxes and texareas, just use...

border: 1px solid #BBB;
background: #FFF url('images/field_background.png') no-repeat top left;
height: 16pt;
padding-top: 4px;
padding-left: 4px;

...where field_background.png is easily created by making a white box that is 800 x 400, saved as a greyscale PNG, and has a left and top margin 2 pixels wide. The outer pixel of that margin should be the color #ebebeb, and the inner pixel of that margin should be #f5f2f2.