In keeping with my New Year’s resolution to not get involved in “black-hole” projects so that I have more flexibility to pursue fun stuff on a whim, I whipped up a fun experiment in CSS3.

The Main Idea

If you design a lot of forms, you know that radio and checkbox lists are hard to style. And no matter how perfectly you lay them out, they are still just plain boring. I thought it would be fun to make checkbox and radio lists a bit more fun by going an entirely different route, and by getting a bit more 3D.

Enter “Chunky Checker.” This set of styles takes an ordinary list of checkboxes or radio buttons and converts them into a super-chunky 3D list. As the radios/checkboxes are activated, the particular segment of the list transforms, creating a “depressed” look, sort of as if a button was physically pressed.

The Markup

This approach is completely, 100% CSS and HTML–no JavaScript whatsoever. Moreover, it uses a pretty standard markup. The following is all that’s needed to recreate the demos:

<fieldset>
    <legend>Favorite Color:</legend>
    <input type="checkbox" name="color" value="Red" id="red" class="red"/>
    <label for="red">Red</label>
    <input type="checkbox" name="color" value="Orange" id="orange" class="orange" />
  More >