Beautiful CSS3 checkboxes and radio buttons without JavaScript

Thanks to the: checked pseudo-class, introduced in CSS3, you can style forms with checkboxes and radio buttons as you like. This topic discusses one very simple way, and without using JavaScript.



Demo Download the sources

To start, let's make a simple checkbox:

Check Box 1

Now you need to hide the checkbox and use sprites to display the checked checkbox / radio button:

input[type="checkbox"] {
    display:none;
}
input[type="checkbox"] + label span {
    display:inline-block;
    width:19px;
    height:19px;
    margin:-1px 4px 0 0;
    vertical-align:middle;
    background:url(check_radio_sheet.png) left top no-repeat;
    cursor:pointer;
}

It remains only to make it all work. By clicking, the sprite should change from marked to unmarked and vice versa:

input[type="checkbox"] {
    display:none;
}
input[type="checkbox"] + label span {
    display:inline-block;
    width:19px;
    height:19px;
    margin:-1px 4px 0 0;
    vertical-align:middle;
    background:url(check_radio_sheet.png) left top no-repeat;
    cursor:pointer;
}
input[type="checkbox"]:checked + label span {
    background:url(check_radio_sheet.png) -19px top no-repeat;
}

Browser support

The pseudo-classes, in particular: checked, work fine in most browsers, with the exception of Internet Explorer 9 (and below) and Safari on iOS below version 6. This is how our form is displayed in IE:



Post written based on the lesson on tutplus.com Quick Tip: Easy CSS3 Checkboxes and Radio Buttons .