Chunky Checker: Some CSS3 Fun
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.
<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" /> <label for="orange">Orange</label> <input type="checkbox" name="color" value="Yellow" id="yellow" class="yellow" /> <label for="yellow" class="yellow">Yellow</label> <input type="checkbox" name="color" value="Green" id="green" class="green" /> <label for="green" class="green">Green</label> <input type="checkbox" name="color" value="Blue" id="blue" class="blue" /> <label for="blue">Blue</label> <input type="checkbox" name="color" value="Indigo" id="indigo" class="indigo" /> <label for="indigo">Indigo</label> </fieldset>
Nothing out of the ordinary here.
How it Works
in general, the styling is created by completely hiding the checkbox/radio buttons, and applying all of the styles to each input’s label. As checkboxes and radio buttons will be activated by their label being clicked, it’s easy to manage the “state” of the input element.
Speaking of input state, the stylesheet uses the :checked psuedo-selector to determine whether or not to apply particular styles based on the state of the input. There are also rules to apply particular styles based on the state of adjacent inputs.
Finally, there are box-shadows added to create a 3D-ish look, and some animations are thrown in the mix to make the whole thing a bit more dynamic.
This has been tested very little I don’t recommend you use it in production anywhere, as the following issues have been admittedly neglected. If you have suggestions for improving in these areas, please get the source from GitHub and hack away to your heart’s content.
Cross-browser Compatibility: I’ve only tested it on Chrome, Firefox, Safari, and Opera, and even then, only on Mac. It seems to work decently well on all of them, although by far it works best in Firefox (go figure). There’s no telling how it behaves in IE9+, and it will surely be terrible in anything before IE9. On the other hand, this is an experiment in CSS3, so that’s kind of expected…
Accessibility: Accessibility for this is probably awful, although I don’t have the interest to test it. There is currently no “focus” class for the inputs’ labels, so this probably isn’t great for use with a keyboard.
Chrome Hack: There is a crazy, silly bug in Chrome that caused me some headaches. If you depress a label, you’ll notice that an inset shadow appears on the depressed label element. When depressing the label to the right of an already-depressed label, the shadow *should* disappear. This works correctly in Firefox and Opera, but only works in Chrome if you move your mouse over the previously-depressed label, open Developer Tools, close Developer Tools, or do some other action that messes with Chrome’s chrome.
Fortunately, I ran across a good description of this bug, which helpfully also had a hack solution. Check it out if you’re curious.
I whipped up a couple of demos to show that this works pretty snazzily with radios and checkboxes.
|Print article||This entry was posted by Joel Watson on January 16, 2012 at 8:53 pm, and is filed under Uncategorized. Follow any responses to this post through RSS 2.0. You can leave a response or trackback from your own site.|
No trackbacks yet.
about 1 year ago - No comments
Whether you’re scraping content from a website, or simply dealing with the “tag soup” generated from your own site’s WYSIWYG, you probably know that reliably parsing HTML is a pain at best, extremely difficult at worst. Not only do you have to contend with unpredictable content, but there’s no guarantee that the content you try…
about 2 years ago - 1 comment
There’s something with me, the weekend, and CSS3…hmm… On Saturday, Google Politics & Elections posted an interesting infographic about search trends over the last week related to the four remaining GOP Presidential candidates. Here’s the infographic: Overall, pretty nice. It makes good use of color, highlights the important details, and avoids loading the graphic with…
about 4 years ago - No comments
At work, we recently kicked off an effort to make sure that all of the emails coming from our applications are Outlook 2010 compliant…meaning that they render in a reasonably acceptable manner–at least as emails go. On the surface, this doesn’t appear to be that big of a deal. However, for us it is, because…
about 5 years ago - No comments
If you use one or more of the billion and seven content managment systems out there, you're probably more than familiar with a what-you-see-is-what-you-get (WYSIWYG) text editor. These *fun* little textareas allow users to mimic, with decent accuracy, the styles and organization that they would normally apply in word-processing documents. The original intention of…
about 6 years ago - No comments
Okay, so at some point as a web designer you're going to come across a project where you have to design some kind of gallery with image thumbnails. In an ideal world (e.g., Photoshop), all of the thumbnails will be precisely the same size, so plugging them into nice little skins (the "pretty" that you…