Checkboxes, Radio Buttons, Drop Down Menu Select Lists, Custom Form Elements, CSS Form Styling

The CSS

If you make your own images, you may need to change a few things in the cascading style sheet. In .checkbox and .radio, the height property should be one fourth of the height of the full size images. You also might have to change the width property in .select selector. You probably won't have to edit any other portions of the CSS, but regardless, this part is still straight forward.

1. .checkbox, .radio {
2.   width: 19px;
3.   height: 25px;
4.   padding: 0 5px 0 0;
5.   background: url(checkbox.png) no-repeat;
6.   display: block;
7.   clear: left;
8.   float: left;
9. }
10. .radio {
11.   background: url(radio.png) no-repeat;
12. }
13. .select {
14.   position: absolute;
15.   width: 158px;
16.   height: 21px;
17.   padding: 0 24px 0 8px;
18.   color: #fff;
19.   font: 12px/21px arial,sans-serif;
20.   background: url(select.png) no-repeat;
21.   overflow: hidden;
22. }

The XHTML

The script won't customize checkboxes, radio buttons or select lists unless you declare the styled class. Simply add class="styled" to any checkbox, radio button or option list and the JavaScript and CSS will take over from there.

URL : http://ryanfait.com/resources/custom-checkboxes-and-radio-buttons/