The Wufoo Blog

How to Customize Checkbox and Radio Inputs
with Custom CSS

By Chris Coyier · June 13th, 2011

Thanks to the magic of CSS, we can offer our users a lot of ways to change the look of their Wufoo forms. Unfortunately, the visual look of checkboxes and radio buttons depend largely on the platform you are on and they’re a bit tricker to customize. Here’s Mac OS X Snow Leopard and Windows 7, next to a set of custom designed checkboxes:

Default Radios and Checkboxes

Most techniques you’ll find on how to change the look of checkbox and radio fields tend to utilize JavaScript. They insert lookalike elements, hide the original input, and attach click event handlers to the lookalikes, which toggle the look as well as toggle the value of the original input. It’s all really clever, but won’t work on Wufoo forms because (for everyone’s good) we don’t allow you to run your own JavaScript on our forms.

Fortunately, there is a way to customize the look of checkboxes and radio buttons entirely through CSS! This technique was pioneered by Ryan Seddon in his article Custom radio and checkbox inputs using CSS. We’ve tweaked it a bit and will walk you guys through how to use the technique for your Wufoo forms.

Customization in Action

Just so you have an idea of what the end effect is going to look like when you’re done, we’ve whipped up a little example form showing off the custom styles.

Custom Checkbox / Radio Button Comparison

View Example Form

1.) Set up Custom CSS for your Form

You’ll need to create a new theme through our Theme Designer and apply that theme to the form. We have a tutorial on getting going with Custom CSS here.

2.) Prepare the Images

Custom Radio ButtonCustom CheckboxOff StateWe’ll prepare three different images. One for when the checkbox or radio button is not currently selected (off.png), a checkbox image for when a checkbox is selected (check.png), and a radio button image for when a radio button is selected (radio.png). Place these images in the same folder as where you are hosting your custom CSS file.

3.) The CSS

Here’s the CSS, commented up for your reading pleasure, in it’s entirety

/* 
    Hide the original radios and checkboxes
    (but still accessible)
    
    :not(#foo) > is a rule filter to block browsers
                 that don't support that selector from
                 applying rules they shouldn't
       
*/
li:not(#foo) > fieldset > div > span > input[type='radio'], 
li:not(#foo) > fieldset > div > span > input[type='checkbox'] {
    
    /* Hide the input, but have it still be clickable */
    opacity: 0;
    
    float: left;
    width: 18px;
}


li:not(#foo) > fieldset > div > span > input[type='radio'] + label,
li:not(#foo) > fieldset > div > span > input[type='checkbox'] + label {
    margin: 0;
    clear: none;
    
    /* Left padding makes room for image */
    padding: 5px 0 4px 24px;

    /* Make look clickable because they are */
    cursor: pointer;
    
    background: url(off.png) left center no-repeat; 
}

/*
    Change from unchecked to checked graphic
*/
li:not(#foo) > fieldset > div > span > input[type='radio']:checked + label {
    background-image: url(radio.png);
}
li:not(#foo) > fieldset > div > span > input[type='checkbox']:checked + label {
    background-image: url(check.png);
}

Place this in your Custom CSS file, which is where your theme points to, which is applied to your form, and thus will take effect! Curious about the li:not(#foo) thing? That’s a technique called “rule filtering” (see article by Lea Verou) which helps make sure our properties only apply in browsers where they are going to work.

This entry was posted 2 years ago and was filed under Tips & Tricks. Comments are currently closed.

Comments

  1. Thanks for the tutorial, they just make my forms look outstanding. Having one minor glitch when the browser is smaller that the form. Clicking on a radio button scrolls the form to the top. Tested in Chrome, Firefox and Safari all with same results.

    My example below, please note this form is live. https://extremephotography.wufoo.com/forms/great-pyramid-race-registration/

    Posted 2 years ago by Muzza.
  2. Good technique. But works only on Wufoo forms.

    Posted 2 years ago by Saeed Neamati.
  3. Looks great - next post should be about drop downs!

    Posted 2 years ago by Craig.
  4. @Saeed - Actually that’s not true! Check out this article which pioneered the technique: http://www.thecssninja.com/css/custom-inputs-using-css There is a download there with a generic form that you can check out in any of the supported browsers and see it work. The CSS code presented above has CSS selectors that are specific to Wufoo’s form structure, so that exact CSS is for Wufoo forms, but the idea works on a wider scope.

    Posted 2 years ago by Chris Coyier.
  5. The best way to customize checkbox and make it compatible with ie6 :

    http://www.dreamsnet.it/2011/06/personalizzare-checkbox-html-customizing-checkbox-form-html-ie6-compatibile/

    Simple ZIP demo to download and videotutorial (in italian).

    Posted 2 years ago by Marco Marcoaldi.
  6. Thanks for sharing Marco! That relies on Selectivzr, which is awesome, but is third party JavaScript which can’t be used on Wufoo forms. The technique above instead prevents IE6 from attempting to replace the checkboxes/radio buttons with rule filtering.

    Posted 2 years ago by Chris Coyier.
  7. There should be someway in which Submit button and the name of the form also come in the same line as the fields. I have been trying to put a single line form on my homepage to capture phone no and email ID and submit button is coming below :(

    Posted 2 years ago by Iris Holidays.
  • Search

  • About

    The Wufoo Blog is the official online publication written by the developers of Wufoo about their online form builder, form-related technologies, and whatever else may fit their fancy—like robots.

  • Archives