Radio Button and Check Box Customization

It is possible to use tried and true radio buttons and checkboxes, but customize the appearance. The approach on this page is based on the CSS-only solution that Ryan Seddon worked out here. But, this example uses JavaScript for changing the images, instead of using CSS selectors. Either way follows the accessibility guidelines.

First, you hide the form control off-screen. Next, you add a background image to the label and give the label padding, so that the background image sits to the side of the label, just where the check box or radio button would sit. Finally, you use either JavaScript or CSS selectors to change the background images or other visual attributes to represent the 4 states:


Custom Radio Group


Standard Radio Group