Custom Checkboxes and Radio Buttons With CSS and JavaScript

This JavaScript and CSS will allow you to use custom images to style checkboxes, radio buttons and drop down menu select lists.

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

Have you ever wanted to use your own images for checkboxes, radio buttons or select lists? This script will let you do that. Easily. The unobtrusive script gracefully degrades, so if JavaScript is disabled, normal form input objects appear instead of your customized elements. This works flawlessly in Firefox, Safari, Internet Explorer 7, Opera and others. In Internet Explorer, the select lists are unstyled, but the checkboxes and radio buttons still look and function beautifully. So go ahead, CSS form styling is this easy:

  1. <input type="checkbox" class="styled" />

The example

This script is stand-alone and does not require jQuery or other library to work. If you are using jQuery in your project, fear not! This will still work perfectly, but you don't need that extra bloat to have beautiful checkboxes and radio buttons.

View a more comprehensive example

How does it work?

In a nutshell, the JavaScript looks for every form element with class="styled" on it; hides the real form element; sticks a span tag with a CSS class on it next to the element; and, finally, mouse events are added to the span that handles the visual stages form inputs go through when they are clicked.

Download the full script

Download the CSS file

Custom Checkboxes Custom Radio Buttons

To get the checkboxes, radio buttons and select boxes to work properly, you'll need to change three variables in the script: checkboxHeight, radioHeight and selectWidth on lines 21-23. If you use the images I created, you won't have to change the variables, but if you make your own, chances are you'll have to. The checkboxes and radio buttons to the right are linked to transparent PNG images for you to use freely if you'd like. The first two variables are the height of a single stage of the checkbox and radio button, and the third is the width of the select box. You may need to spend a little time tinkering with the checkbox and radio button images so they don't twitch during different stages.

  1. var checkboxHeight = "25";
  2. var radioHeight = "25";
  3. var selectWidth = "190";

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 HTML

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.

Checkbox

  1. <input type="checkbox" name="a" class="styled" />

Radio button

  1. <input type="radio" name="radio" class="styled" /> Yes
  2. <input type="radio" name="radio" class="styled" /> No

Select list

  1. <select name="d" class="styled">
  2.   <option value="1">Option 1</option>
  3.   <option value="2">Option 2</option>
  4.   <option value="3">Option 3</option>
  5. </select>

onChange and other JavaScript events

This script utilizes JavaScript's onChange and other events. Because these events can only be used once, if you want to add more functions to an event, you will need to call them from inside my script.

Usage

You are free to share, alter and use this script commercially. Just leave the title, my name and website intact in the JavaScript script. This script is licensed under a Creative Commons license.

Comments

I know it's long overdue that I allow comments on my resources. You can now submit them!
Note: I approve comments before before they appear on the site, so please don't spam.

Darrell September 19th, 2014

Just had to comment after implementing this. This was just what I needed. I have been wanting my form elements to have the same look across browsers for the longest time and this works PERFECTLY.
Thank you. Excellent work! :)

-D-

Leave a comment






Web Design Resources and Articles