jQuery Plugins for Styling Checkbox & Radio Buttons

Line25 is reader supported. At no cost to you a commission from sponsors may be earned when a purchase is made via links on the 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.

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.

Switch

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

Switchery

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

 Labelauty

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

rcSwitcher

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

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.

Checkator

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

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.

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:

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

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

Bootstrap Checkbox

This is a checkbox component based on Bootstrap framework.