Line25

jQuery Plugins for Styling Checkbox & Radio Buttons

jQuery Plugins for Styling Checkbox & Radio Buttons
Home » Articles » jQuery Plugins for Styling Checkbox & Radio Buttons

November 14, 2018

Line25 is reader supported. At no cost to you an affiliate commission may be earned when a purchase is made through various links on our site. Learn more

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 jQuery plugins for styling checkbox and radio buttons, as well as other similar form elements, ranging from clean and minimal button styles to unique iPhone style toggle switches.

Also check out more jQuery plugins.

Fancy check boxes and radio buttons with CSS

Here are some simple check box and radio buttons made with a few lines of CSS and JavaScript. This also comes with a step by step tutorial that teaches you how to achieve this result.

jQuery Plugins checkbox radio buttonsPin

jqTransform

This plugin is a jQuery styling plugin which allows you to skin form elements. It teaches you exactly what code snippets to use in order to achieve this result.

jQuery Plugins radio buttonsPin

Switch

Switch is a simple javascript plugin for creating iOS-style switches from simple checkboxes. It also has a set of options and callbacks.

 simple javascript plugin togglePin

Switchery

Switchery is a plugin that helps you turn your default HTML checkboxes into beautiful iOS 7 style switches.

switchery jQuery Plugins checkbox radio buttonsPin

 Labelauty

This is a lightweight and beautiful jQuery plugin for radio and checkbox inputs.

Labelauty jQuery PluginPin

rcSwitcher

rcswitcher is jquery plugin that transforms radio buttons and checkboxes into a nice switch button.

rcswitcher jQuery Plugins checkbox radio buttonsPin

iPhone-style Checkboxes

Ever wanted those flash iPhone on/off toggle switches on your web page? Now you can make them with jQuery! This plugin implements the iPhone toggles as replacements for standard HTML checkboxes.

jQuery Plugins checkboxPin

Checkator

Checkator is a jQuery-based replacement for radio and checkbox elements.

checkator pluginPin

jQuery Fancy Custom Radio-button and Checkbox

Here’s a jQuery Plugin for Fancy Custom Checkbox and Radio-buttons. It’s really easy to use, you just have to write a couple of lines of javascript code and add some CSS to your HTML.

jQuery Plugins checkbox radio buttonsPin

iPhone Style Radio and Checkbox

Do you want to create iPhone style radio buttons and check boxes? This tutorial teaches you what code snippets to use. Feel free to reuse the source code, or follow the steps below:

jQuery Plugins checkbox radio buttonPin

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

This plugin allows you to generate iPhone-style buttons from checkbox and radio elements.

jQuery Plugins checkbox radio buttonsPin

Bootstrap Checkbox

This is a checkbox component based on Bootstrap framework.

bootsrap checkboxPin

Written by Iggy

Iggy is a designer who loves experimenting with new web design techniques, collating creative website designs, and writing about the latest design trends, inspiration, design freebies, and more. You can follow him on Twitter

27 Comments

Would you like to say something?

  1. Bay Area Website Design says:

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

  2. web design hull says:

    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.

  3. Johannes Nyberg says:

    Brilliant! :)

  4. usa webmaster says:

    good article. thank you for the awesome collection.

  5. web designing in chennai says:

    Thanks chris gotta lot of information..

  6. Riak says:

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

  7. تصميم مواقع says:

    good resource thank you..

  8. ABDUL JANOO says:

    cool

  9. sarah says:

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

  10. kriti shah says:

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

  11. Daniel Lucas says:

    Thanks Chris, great article

  12. ninjacontent says:

    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.

  13. cristian cena says:

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

    • Daniel Lucas says:

      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

  14. Elaine says:

    Thanks Chris, much appreciated.

  15. Agentur Schade says:

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

  16. Liam says:

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

  17. Creative design agency says:

    These are lovely! Thanks for the awesome collection

  18. India Web Designing Company says:

    Hi Chris thanks for sharing the awesome post

  19. Marko Dugonjić says:

    Hey Chris, thanks for listing Fancy Checkboxes :)

  20. Eoin Murphy says:

    Chris, these are awesome.

    Thanks!

  21. Andy Feliciotti says:

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

    • Tomas says:

      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.

  22. Necrokeeper says:

    Nice selection !

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

Please Share