jQuery Plugins for Styling Checkbox & Radio Buttons

The Checkbox and radio button versions of input elements used in forms on the web are amongst the most difficult to style according to your overall web design. These elements will display differently depending on the user’s operating system, but we can change their appearance globally with the help of jQuery. This roundup links up 12 handy resources for styling your form elements, from clean and minimal button styles to unique iPhone style toggle switches.

Visit the plugin homepage

Written by Chris Spooner

Chris Spooner is a designer who has a love for creativity and enjoys experimenting with various techniques in both print and web. Check out Chris' design tutorials and articles at Blog.SpoonGraphics or follow his daily findings on Twitter.

27 Comments

Necrokeeper says:

May 30, 2011 at 11:18 am

Nice selection !

But you missed this one (my favorite ! ^_^) http://uniformjs.com/
Eoin Murphy says:

May 30, 2011 at 11:37 am

Chris, these are awesome.

Thanks!
♥
Andy Feliciotti says:

May 30, 2011 at 4:12 pm

Great list, didn't realize you could use jquery to style forms :D
- Tomas says:
  
  June 1, 2011 at 8:30 am
  
  Jquery = Javascript = You can modify anything. It's just that people spend time to test it crossbrowser and hopefully get it work in most of browsers.
123 says:

May 30, 2011 at 8:06 pm

123
- Chris says:
  
  June 2, 2011 at 9:25 pm
  
  456…
  - fgdf says:
    
    June 9, 2011 at 7:35 am
    
    789
Marko Dugonjić says:

May 30, 2011 at 11:17 pm

Hey Chris, thanks for listing Fancy Checkboxes :)
India Web Designing Company says:

May 31, 2011 at 10:48 am

Hi Chris thanks for sharing the awesome post
Creative design agency says:

May 31, 2011 at 7:11 pm

These are lovely! Thanks for the awesome collection
Liam says:

May 31, 2011 at 7:36 pm

There's also ideal forms, pretty cool plugin too.
http://www.jqidealforms.com
Agentur Schade says:

May 31, 2011 at 8:19 pm

Again an awesome ressource of knowledge! Love your ongoing inspiration for top notch webdesign.
Elaine says:

June 1, 2011 at 4:46 pm

Thanks Chris, much appreciated.
cristian cena says:

June 1, 2011 at 5:27 pm

and <input type="file"> ? );
- Daniel Lucas says:
  
  June 2, 2011 at 10:46 am
  
  I've been looking at this for a while now. I really liked jqtransform but had problems with <select>.
  
  I've started using uniform and that's great, it also handles input type=file
ninjacontent says:

June 2, 2011 at 9:35 am

I do not possess too much idea about html and forms, but from what I see over here, it is quite interesting. I guess I need to visit this site again to read updated comments by others and the original poster.
Daniel Lucas says:

June 2, 2011 at 10:47 am

Thanks Chris, great article
kriti shah says:

June 2, 2011 at 11:01 am

Thanks a lot for such a wonderful list of jquery plugins.
sarah says:

June 2, 2011 at 12:06 pm

Thanks! these are brilliant – will be trying out a few.
ABDUL JANOO says:

June 3, 2011 at 7:15 am

cool
تصميم مواقع says:

June 4, 2011 at 6:46 pm

good resource thank you..
Riak says:

June 5, 2011 at 9:49 am

Nice list thanks, these really make a good website become a great website with these little touches
web designing in chennai says:

June 5, 2011 at 9:34 pm

Thanks chris gotta lot of information..
usa webmaster says:

June 6, 2011 at 2:38 pm

good article. thank you for the awesome collection.
Johannes Nyberg says:

June 7, 2011 at 1:51 pm

Brilliant! :)
web design hull says:

June 9, 2011 at 7:40 am

Thanks for these, I wasn't aware of using jquery with checkboxes and buttons, some of these look great and I'll definitely be trying a few out.
Bay Area Website Design says:

June 10, 2011 at 11:44 am

In my web designing experience i never used radio versions button but i think this is a good technique.