30 jQuery Plugins For Styling HTML Form Elements

HTML form elements have always been a problem for designers, they are ugly and never match a website or app style. And also they look different depending on what computer you are using. So here are 30 jQuery plugins to help you create custom radio buttons, checkboxes and select elements. Some of these plugins also extend the functionality of your form elements.

Labelauty jQuery Plugin

A nice and lightweight jQuery plugin that gives beauty to checkboxes and radio buttons and allows custom labels for each status of (un)checked inputs.

labeleauty-18

Select-or-Die

Select or Die is a jQuery alternative to modify select elements to a new level.

select-or-die-1

jQuery Form Styler

The documentation is written in Russian but you can check demo file to learn how to use this awesome plugin or use google translate to read it.

html-form-styling-23

Select2

Select2 gives you a customizable select box with support for searching, tagging, remote data sets, infinite scrolling, and many other highly used options.

select2-2

customSelect

Lightweight, unobtrusive, custom style select boxes with jQuery.

custom-select-3

Selectator

Selectator is a jQuery-based replacement for select boxes. It supports searching, and affects the original select box directly, which is used as the data container.

selectator-4

selectToAutocomplete

Turns any select tag into an autocomplete field with weighted options, synonyms and loose matching.

selectToAutocomplete-5

jQuery Selectric

jQuery Selectric is a jQuery plugin designed to help at stylizing and manipulating HTML selects.

jquery-selectric-6

Chosen

Chosen is a jQuery plugin that makes long, unwieldy select boxes much more user-friendly.

chosen-6

DropKick.js

This jQuery plugin will make your ul li elements look like select element.

dropkickjs-7

FancySelect

FancySelect is easy to use. Just target any select element on the page, and call fancySelect function on it.

fancyselect-8

Jquery CSS Multi Column Select Box

A Simple plugin (3Kb) that will hide the Select control and then display a multicolumn dropdown (css).

multi-select-9

EasyDropDown

EasyDropDown is a jQuery plugin that effortlessly turns humble elements into styleable drop-down menus for use in forms or general UI/navigation.

EasyDropDown-10

Image Picker

Image Picker is a simple jQuery plugin that transforms a select element into a more user friendly graphical interface.

jquery-image-11

jQuery Cascading Dropdown

A simple and lighweight jQuery plugin for creating cascading dropdowns.

jquery-cascade-dropdown-12

customSelect

A simple jQuery UI widget to pretty up select elements and input custom ranges.

customselect-13

Selectik

Selectik is jQuery select plugin, easy use, cross-browser alternative to the standard select form element which can be customised with CSS.

selectik-14

iCheck

Highly customizable checkboxes and radio buttons for jQuery and Zepto.

icheck-15

Bootstrap Switch

Turn checkboxes and radio buttons in toggle switches.

bootstrap-switch-16

Checkbo

Custom Checkbox and Radio, lightweight jQuery Plugin.

checkbo-17

ScrewDefaultButtons

ScrewDefaultButtons is a simple jQuery plugin allowing you to replace the browser defaults for radio buttons and checkboxes with your own custom design.

screwdefaultbuttons-19

radiosToSlider

jquery plugin to create a slider using a list of radio buttons.

radiotoslider-20

Checkator

Checkator is a jQuery-based replacement for radio and checkbox elements. It supports css styling, and affects the original radio or checkbox element directly, which is used as the data container.

checkator-21

wSelect.js

A jQuery plugin for fully customizable and clean looking select boxes. These are div based select boxes that will allow us to do additional things like adding icons to our options.

wselect-22

Deep Checkbox

jQuery plugin that brings some logic to nested checkboxes.

deep-checkboxes-24

Below you will find collection of html form elements done in pure CSS.

CSS3 Checkbox Styles

css3-checkboxes-25

Accessible toggle-style checkbox

toggle-style-checkbox-26

CSS “Ripple/Wave” checkbox and radio button

checkboxes-27

uSwitch pure CSS select control

uswitch-28

SCSS Radio Buttons

scss-radio-button-29

Glowing Radio Buttons and Checkboxes using only CSS

glowing-radio-checkbox-30


Leave a comment

Please be polite. We appreciate that. Your email address will not be published and required fields are marked