NerdBook

Beautiful checkboxes & combo boxes with jQuery

Posted on the September 11th, 2009 under Web Tips by Rayson

If you’ve been designing websites for ages now, you’d probably hate it when it comes to creating beautiful forms, only to find that checkboxes & combo boxes allow very little or limited CSS design. Did I mention how each browser draws them differently?

Today I’ll be sharing a few jQuery plugins that specifically changes how checkboxes and combo boxes behave.

---

1. Pretty checkboxes with jQuery

Aaron has done a pretty good job with this. Who would had thought a simple checkbox could be manipulated and implemented in such a manner? Pretty innovative if you ask me. You can have a look at the script located here, Pretty Checkboxes.

2. jQuery checkbox and Radio button

Another great implementation of a checkbox, kinda reminds you of how Apple’s iPhone does it.

Features:

1. only inline elements used, just like default checkoxes
2. cross-browser look and feel (tested in IE6, IE7, IE8, Firefox and Chrome engines)
3. work with radio buttons too
4. supports inline and jQuery attached click events
5. supports “label hovering”: when you point over parent label element, it will highlight its checkbox (thanks to Eugene for the idea)
6. dynamic skin changing
7. adds new checkbox events “check”, “uncheck”, “disable”, “enable”, ready to use in jQuery.bind() method

Grab the script right over here.

3. Accessible radio button and checkbox replacement

A pretty standard script that replaces radio buttons and checkboxes with a more skinable version. Get the code here.

4. prettyCheckboxes

This script is for people who wants to have a consistent look for checkboxes across browser or those who simply want them to look better. By using this script you wont loose any of the regular inputs usability. This implementation has a nice hover-state. Get the code here.

If you come across anymore jQuery plugins, feel free to drop a comment or two :)