40+ HTML Form Elements Customization Techniques and Enhancements
Posted on in Forms
Web designers often strive for a consistent look & feel of his art across different browsers. Unfortunately, one of the fundamental part of a website, the HTML form elements, is also the most difficult to style. Besides their inconsistent look across different browsers, some of them like the checkboxes, radio buttons, select box and file upload fields are impossible to change beyond a certain extent with CSS only.
But no worries, below is an ultimate list / compilation of 40+ solutions and tutorials you can use to customize and enhance these supposedly non-customizable HTML form elements.
1) 8 Almost All Form Elements Customization & Enhancements
2) 20 Checkbox and Radio Buttons Customization & Enhancements
3) 14 Select Box / Dropdown Box Customization & Enhancements
4) 5 File Upload Field Customization & Enhancements
8 Almost All Form Elements Customization & Enhancements
Uniform (Sexy Forms w/ jQuery)
Uniform let you style and control the look and feel of your checkboxes, drop down menus, radio buttons, file upload inputs & other form elements. Uniform masks your standard form controls with custom themed controls. It works in sync with your real form elements to ensure accessibility and compatibility.
csDefault
It is a lightweight, cross-browser CSS3 and jQuery library which would give all HTML form elements the styling they need. It works on Chrome, Firefox 5+, Opera, IE 7+, Android 2.3, Opera Mobile, Firefox Mobile, Safari 5. The csDefault code is released under public domain.
Custom Form Elements (CFE) for MooTools
Custom Form Elements (CFE) is completely unobstrusive, Javascript form replacement script that will enhance HTML forms elements in terms of style, usability and accessibility by using JavaScript and/or CSS. CFE enhances and will let you customize checkboxes, radio buttons, file upload field, select box, etc. It fully supports focusing on elements as well as tabindex and supports custom events.
Niceforms
Niceforms is a non-intrusive JavaScript method that allows complete customization of checkbox, radio buttons, file input field and other HTML form elements. It’s a script that will replace the most commonly used HTML form elements with custom designed ones. You can either use the default theme that is provided or you can even develop your own look with minimal effort.
jNiceIt
jNiceIt is a jQuery plugin which allows you to customize checkbox, radio button, file upload input, select box & other generic form controls and apply your customized design to them. Design of each form elements can be fully customized via CSS. The plugin supports both fixed and fluid page layouts.
YUI Niceforms
YUI Niceforms is an easy to use and highly configurable YUI plugin to customize checkbox, radio buttons, file upload field and other form controls to give a modern look that is consistent across all major browsers. YUI Niceforms is based on Niceforms by Emblematiq.
Sexy Forms
Sexyforms is a non-intrusive JavaScript library that improves the appearance of HTML forms such as checkboxes, radio buttons, file input, textbox, select box, textarea and buttons.
JQF1 – jQuery FormOne
JQF1 is a jQuery solution for styling & customizing form elements. JQF1 is cross-browser compatible and tested in IE6/7/8, Firefox, Safari, Opera, Chrome, SeaMonkey and Flock. The ability to search or filter inside of select options list is one of JQF1′s exclusive feature.
20 Checkbox and Radio Buttons Customization & Enhancements
Fancy Checkbox & Radio Buttons
This is one of the oldest solution to have a custom checkbox and radio buttons. It uses CSS and old school JavaScript (jQuery version is available) to achieved the desired designed of the checkbox and radio buttons.
ScrewDefaultButtons
ScrewDefaultButtons is a jQuery plugin allowing you to customize the browser defaults for radio buttons and checkboxes with your own custom design. It comes with it’s own commands to give you better control of the custom radio buttons and checkboxes.
formReplacer
formReplacer is ajQuery plugin that replaces default checkboxes, select box or dropdown box and radio buttons with more flexible custom design. You can style those form elements however you like, you just need to alter few CSS rules to change their appearance.
jQuery Checkbox
jQuery Checkbox is a lightweight and easily styllable checkbox plugin for jQuery. The default style mimics the look of an iPhone UI but you can customize it to whatever you want. It has been tested and is compatible with IE7+, FF 3.6+, Opera 10, Safari 5 and Google Chrome.
Adam’s Radio/Checkbox Customisation
The script parses a specified form for input types and associated labels. If the input type is found to be a radio button or checkbox then the widget is hidden and the label is altered to display a custom widget-style-image by modifying the label’s CSS style.
jQuery prettyCheckable
This plugin replaces the default checkboxes and radio button inputs with your own custom design. It’s selectable with “tab” and checkable with keyboard; change events & chainning preserved; and is compatible with IE7+, Chrome, Firefox, Safari and mobile browsers.
jQuery Custom Forms
This is another jQuery plugin authored by Vinícius Ebersol to to generate accessible custom select box, radio buttons and checkbox.
iButton jQuery Plugin
iButton jQuery plugin emulates the checkbox functionality found on the iPhone. It works with checkboxes or radio button elements and have full keyboard support, custom event handlers, iPhone support and many other features.
customInput
A jQuery plugin to build an accessible, custom designed checkbox and radio button input elements. It is based on progressive enhancement that leverages an input element’s built-in functionality and accessibility features and works in all modern browsers without added markup or mandatory CSS classes.
Custom Checkbox & Radio Buttons with Just CSS
This is a tutorial by inserthtml on how to create a custom checkbox and radio buttons with just pure CSS. It works on modern browsers, unfortunately it doesn’t work in IE8.
jQuery FancyOpts Plugin
This plugin allows you to create custom, image-based radio buttons and checkboxes seamlessly integrated into existing forms with graceful degradation. It supports navigation and selection via keyboard input.
ezMark jQuery Plugin
ezMark is a jQuery Plugin that allows you to customize radio buttons and checkboxs. It has been tested and works on all major browsers (IE 6/7/8, Firefox, Safari, Chrome) and it degrades gracefully.
8 More Custom Checkbox & Custom Radio Buttons
1) SlayerOffice Custom Checkbox Elements
2) jQuery Custom Checkbox
3) iPhone Style Radio & Checkbox Switches – won’t degrade gracefully
4) Ryan Fait’s Custom Checkboxes & Radio Buttons
5) prettyCheckboxes – onClick event called multiple times
6) jQuery Checkbox
7) Pretty Checkboxes with jQuery – won’t degrade gracefully
8) Classic Digg-Style Radio Buttons – won’t degrade gracefully.
14 Select Box / Dropdown Box Customization & Enhancements
.customSelect()
This jQuery Plugin uses the native select box functionality of the web browser and overlays a stylable <span> element in order to acheive your custom design select box. Since it makes use of default browser functionality, it can be treated just like any ordinary HTML select box.
DropKick JS
DropKick is a jQuery plugin that works by transforming your existing, boring select box into beautiful, customizable HTML select dropdowns. DropKick works on IE7/8, degrades gracefully and supports keyboard navigation. You should set a tabindex attribute in the select box to enable navigation via tabbing.
SelectBoxIt
SelectBoxIt allows you to replace HTML select boxes with feature rich dropdowns. SelectBoxIt provides first-class support for mobile, tablet, and desktop browsers, triggering the native “wheel” interface for mobile and tablet devices. It has also built-in ARIA support, full keyboard search and navigation support.
Better Select Elements with jQuery & CSS3
This is a tutorial by Martin Angelov on making better select box elements with jQuery and CSS3. The jQuery script is going to take an ordinary select box element, and replace it with a better looking, markup powered version, while keeping all the functionality intact. It keeps the original select box hidden on the page, and changes its value according to the fancy replacement.
Chosen
Chosen is a JavaScript plugin that makes long, unwieldy select boxes much more user-friendly. Instead of forcing your users to scroll through a giant list of items, they can just start typing the name of the item they were looking for. Non-matching entries are removed from view and choices can be selected using enter or mouse click.
Select2
Select2 is primarily not a custom-look solution (though its look and feel is based on Chosen library above) but rather it enhances the functionality of a select box. It is a feature-packed, jQuery plugin for select boxes to enable and support searching, remote data sets, and infinite scrolling of results.
JavaScript Image Combobox
This image combobox is fully skin-able, support keyboard navigation and can be created via JSON object. Each <option> can have an image and description. Multiple selection can have checkbox UI. You may covert all combobox as image combobox, you may convert by id, multiple ids, or by wild card.
7 More Select Box Customization
1) Dropdown Check List
2) jQuery UI MultiSelect Widget
3) jQuery Multiselect
4) Linkselect jQuery Plugin
5) jQuery Selectbox
6) bsmSelect – Better Select Multiple
7) jQuery Custom Select Box
5 File Upload Input Customization and Enhancements
The file upload input field is probably the most difficult HTML form element to style. Thus, only a few solutions are available. You may take a look on the 8 Almost All Form Elements Customization & Enhancements above since some it have also customize the file input elements. But if you want a custom file upload field only, take a look at these 5 resources:
- Filament Group’s jQuery Custom File Upload Input
- Quirksmode’s Styling an input type=”file”
- Viget’s Custom File Inputs with a Bit of jQuery
- File Style Plugin for jQuery
- Changing Form Input Styles on Focus with jQuery
Tags: custom checkbox, custom dropdown box, custom file upload input, custom form elements, custom radio buttons, custom select box, jquery checkbox, jquery file input, jquery radio buttons, select replacement, sexy forms
13 Comments & Reactions
Anthony Alexander
on #I’ve never styled my forms before but I think I’m going to try for my new website, just to give it that extra edge.
Josh L
on #I recently released a YUI plugin version of Niceforms:
http://freshcutsd.com/yui-niceforms/
It handles all form elements, and has a lot of improvements over the official Niceforms, including IE6 support, support for dynamic forms, CSS3 resize support, and more.
Cheers!
David
on #I have tried your niceforms but there are problems regarding the background of a larges textarea. Also, there are problems when I disable my javascript, radio buttons, checkboxes, select boxes and regular submit buttons don’t show up.
Josh L
on #Could you post a screenshot of the textarea problems?
Using CSS3 to hide the original elements – didn’t even think about what would happen with JS disabled on that one. DOH!
Thanks for your contributions to v0.2!
aravind
on #This one is really useful..
But you missed one thing, Styling of file inputs.
There are many free scripts available to help us styling file inputs. You should have included that.
One of them ~ http://bit.ly/E9jwr
Rahul
on #Very cool customization of Form Elements. Everything is going graphical.
Lyndon
on #The issue is the scrollbar of the textarea. Also, it seems that your background image for the textarea cannot handle too long texareas, you can see it in your demo that it tries to create another textarea below it.
Lyndon
on #Yeah, there should be also a list for file inputs.
Den
on #Image listbox component: http://servletsuite.com/servlets/customlisttag.htm
Israel Viana
on #Naaaah most of them kill accesibility!
Eduardo
on #i think it should be 25
http://www.coders.me/web-html-js-css/javascript/sexy-forms
Joeyj01
on #Customizing form elements are easier now with form builders.
Leandro
on #Thanks for this great list. I currently using ScrewDefaultButtons, using all all custom form elements is a bit too much IMO.