Code Snippet
Custom Checkboxes and Radio Buttons
The selectors here are specific to Wufoo markup, but the concepts at work can work for any form. The overall idea is that you make the default radio buttons and checkboxes invisible by setting their opacity to zero, and replace them with graphics. Then use the :checked selector to alternate the graphics between their checked and unchecked versions.
/*
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);
}
Perhaps you could provide some sample HTML markup, that would be helpful!
Great. I had to resort to Javascript to do the magic. There are some great plug-ins online.
What’s the browser support for this technique?
I was trying to work out a way to do this just the other day!
Nice solution, thanks…
The Wufoo blog page says it works in IE9+, etc. At a glance, the only bits that I can see that prevent it working in IE7/8 are the :checked selectors.
This solution aims to do everything in CSS, but if you don’t mind a tiny bit of javascript, perhaps you could simulate :checked by detecting this with javascript, and applying an extra CSS class to the relevant elements as necessary. So for example, you could maybe rewrite the last two rules as:
In Wufoo’s case, since users are not allowed to add their own javascript, Wufoo could just add a little bit of javascript to their global JS code which renders on every form…. it wouldn’t really hurt to do so, as all you’d be doing is appending extra class names (e.g. class=”field radio” becomes class=”field radio checked” when it is checked).
Just an idea anyway!
The CSS + tiny bit of JS solution makes a lot of sense to me if you want IE7/8 support.
This solution sounds promising – I’ll try this when I get home as I still haven’t found a good method if achieving custom check boxes yet. I wish HTML5 had made this easier…
You could also use :before and :after psuedo-elements to style the check/uncheck instead of using images. Sweet snippet, though.
DigWP
A book and blog co-authored by Jeff Starr and myself about the World's most popular publishing platform.
Quotes on Design
Design, like Art, can be an elusive word to define and an awfully fun thing to have opinions about.
HTML-Ipsum
One-click copy to clipboard access to Lorem Ipsum text that comes wrapped in a variety of HTML.
Bookshelf
Hey Chris, what books do you recommend? These, young fertile mind, these.