Line25

jQuery Plugins for Styling Checkbox & Radio Buttons

Read the full post

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.

Fancy checkboxes and radio buttons with CSS

Visit the plugin homepage

Visit the plugin homepage

jqTransform

Visit the plugin homepage

Visit the plugin homepage

FancyForm

Visit the plugin homepage

Visit the plugin homepage

jQuery Checkbox

Visit the plugin homepage

Visit the plugin homepage

jNice

Visit the plugin homepage

Visit the plugin homepage

NiceForms

Visit the plugin homepage

Visit the plugin homepage

iPhone-style Checkboxes

Visit the plugin homepage

Visit the plugin homepage

ezMark jQuery Checkbox & Radio Button plugin

Visit the plugin homepage

Visit the plugin homepage

jQuery Fancy Custom Radio-button and Checkbox

Visit the plugin homepage

Visit the plugin homepage

iPhone Style Radio and Checkbox

Visit the plugin homepage

Visit the plugin homepage

Create iPhone-style buttons with the iButton jQuery Plug-in

Visit the plugin homepage

Visit the plugin homepage

Free web shadows pack for every subscriber

Join the mailing list to have new content delivered straight to your email inbox. Every subscriber gets a free pack of realistic web shadows.

Written by Chris Spooner

Chris Spooner is a designer who loves experimenting with new web design techniques collating creative website designs. Check out Chris' design tutorials and articles at Blog.SpoonGraphics or follow his daily findings on Twitter.

  • Necrokeeper

    Nice selection !

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

  • http://eoindesign.com Eoin Murphy

    Chris, these are awesome.

    Thanks!

  • http://drawne.com Andy Feliciotti

    Great list, didn't realize you could use jquery to style forms :D

    • Tomas

      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

    123

    • Chris

      456…

      • fgdf

        789

  • http://www.maratz.com/ Marko Dugonjić

    Hey Chris, thanks for listing Fancy Checkboxes :)

  • http://www.dreamdezigns.com/ India Web Designing Company

    Hi Chris thanks for sharing the awesome post

  • http://www.socreative.tv Creative design agency

    These are lovely! Thanks for the awesome collection

  • Liam

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

  • http://www.agentur-schade.de Agentur Schade

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

  • http://www.designituk.com Elaine

    Thanks Chris, much appreciated.

  • cristian cena

    and <input type="file"> ? );

    • http://blog.europcsolutions.com Daniel Lucas

      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

  • http://www.ninjacontent.com ninjacontent

    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.

  • http://blog.europcsolutions.com Daniel Lucas

    Thanks Chris, great article

  • http://www.theledbulbs.info kriti shah

    Thanks a lot for such a wonderful list of jquery plugins.

  • http://www.freshegg.com sarah

    Thanks! these are brilliant – will be trying out a few.

  • ABDUL JANOO

    cool

  • http://simacom.de/webdesign تصميم مواقع

    good resource thank you..

  • http://www.riak.uk.com Riak

    Nice list thanks, these really make a good website become a great website with these little touches

  • http://www.webdesigninginchennai.com web designing in chennai

    Thanks chris gotta lot of information..

  • http://goldennetwork.net usa webmaster

    good article. thank you for the awesome collection.

  • http://johannesnyberg.se Johannes Nyberg

    Brilliant! :)

  • http://www.buzz-webdesign.co.uk web design hull

    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.

  • http://www.espinteractivesolutions.com Bay Area Website Design

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