Css and javascript are common in page style, but ocassionally someone will want to customize form elements. Although radio buttons and checkboxes are awkward to style, it is possible. Some solutions involve changing a span which encloses the form element, others rely on background images.

Ennie - has dual jsfunction, one for MSIE
Meenie - single js function changes colors
Minnie

Fancy Form* FF and IE - uses background images and mootools js

Be sure to test cross brower appearance. Although it is possible to change the look of the form check boxes, unless there is some overwhelming need, it probably introduces unnecessary complication in the form.

Below are the check boxes as they are seen in IE6, which uses the Fancy Form css for everything.

In Firefox 3, the individual spans respect the styles one by one.

For an article on the ways different browsers render css in form controls see http://www.456bereastreet.com/lab/styling-form-controls-revisited/checkbox/

To download the Fancy Form code, go to http://lipidity.com/fancy-form/

 

 

 

 

 

* FancyForm 0.95 By Vacuous Virtuoso, lipidity.com
Checkbox and radio input replacement script.
Toggles defined class when input is selected.