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.
- .checkbox, .radio {
- width: 19px;
- height: 25px;
- padding: 0 5px 0 0;
- background: url(checkbox.png) no-repeat;
- display: block;
- clear: left;
- float: left;
- }
- .radio {
- background: url(radio.png) no-repeat;
- }
- .select {
- position: absolute;
- width: 158px;
- height: 21px;
- padding: 0 24px 0 8px;
- color: #fff;
- font: 12px/21px arial,sans-serif;
- background: url(select.png) no-repeat;
- overflow: hidden;
- }
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/
