iCheck: Super customized checkboxes and radio buttons.
iCheck works with checkboxes and radio buttons like a constructor. It wraps each input with a div, which may be customized by you or using one of the available skins. You may also place inside that div some HTML code or text using insert option.
iCheck is created to avoid routine of reinventing the wheel when working with checkboxes and radio buttons. It provides an expected identical result for the huge number of browsers, devices and their versions. Callbacks and methods can be used to easily handle and make changes at customized inputs.
There are some CSS3 ways available to style checkboxes and radio buttons, like this one. You have to know about some of the disadvantages of similar methods:
- inputs are keyboard inaccessible, since display: none or visibility: hidden used to hide them
- poor browser support
- multiple bugs on mobile devices
- tricky, harder to maintain CSS code
- While CSS3 method is quite limited solution, iCheck is made to be an everyday replacement covering most of the tasks.
- Identical inputs across different browsers and devices — both desktop and mobile
- Touch devices support — iOS, Android, BlackBerry, Windows Phone, Amazon Kindle
- Keyboard accessible inputs — Tab, Spacebar, Arrow up/down and other shortcuts
- Customization freedom — use any HTML and CSS to style inputs (try 6 Retina-ready skins)
- Screenreader accessible inputs — ARIA attributes for VoiceOver and others
- Lightweight size — 1 kb gzipped
- 32 options to customize checkboxes and radio buttons
- 11 callbacks to handle changes
- 9 methods to make changes programmatically
- Saves changes to original inputs, works carefully with any selectors
Quick[select]: Selection of Common Options in Select Boxes
Quick[select] is a jQuery plugin for quick selection of common options in select boxes.
Select boxes are a two tap or click operation. They take the user out of the flow of the form, and there are certain answers that are more commonly chosen than others, such as a reply of “yes” or “no.” Or maybe you would prefer people to give a definite yes/no answer. This plugin provides the ability to bring those options outside of the select list.
Quick[select] prompts a user to an answer, but provides flexibility for questions that need it. The tool uses the browser’s native select list for its overflow, meaning it will work great on all devices.
It’s been tested with jQuery 2, Internet Explorer 11+, Firefox 40+, Chrome 45+, Safari 8+, Chrome on Android and iOS and Safari on iOS, so it should work properly in most applications. Just download the source files from GitHub, include the JS and CSS tags, attach Quick[select] to the appropriate boxes and you are ready to go!
There are a handful of option classes available and some great examples of how to use this tool in the documentation.
Multi Column Select: Dropdown or Multiple Selection
Multi Column Select can be used to create a single selection multi-column dropdown or multiple selection multi-column dropdown for a variety of website applications.
flexselect: Flex-matching Incremental-finding Controls
Flexselect is a jQuery plugin that turns selection boxes into flex-matching incremental-finding controls. Think of it as Quicksilver squished into a selection box.
The difference is a purely aesthetic one — and something that is becoming increasingly popular on more websites. The dropdown selection has a cleaner and more uniform look with this plugin. You can use the mouse to select from the dropdown menu (as you would expect) or click in the Flexselect box and start typing to see options that match those letters appear.
It’s a usability tool that website visitors will love.
To get started, you’ll need to load the default styles, jQuery, the LiquidMetal scoring algorithm and the plugin. Attach the correlating boxes and turn on elements. Then you can enable any custom options that you fancy and start using the plugin. It’s that simple!
With Flexselect installed, you’ll have the exact same functionality made popular by applications like Quicksilver, LaunchBar and Launchy. Nothing makes filling out this type of menu selection as easy as a flexible typing tool.
Select or Die: Style the Select Elements
Select or Die is a jQuery plugin to style <select> elements in your website design project. The tool is simple to configure and use.
Here are the configurable options:
Select or Die has a simple aesthetic that can be matched to almost any design style.
This is a good tool to play with the look of drop downs or links in your framework as well as other selection-based items. Customization is easy with a little knowledge of how to tinker with the code.
The plugin is simple to install. Download the .zip file, unzip it and include the selectordie.css and either of the two .js files found in the “_src” folder. Initialize the plugin, targeting the desired element in the jQuery selector. Start customizing and you are all ready to go.
iOS 7 style switches for your checkboxes
Easy to use and lightweight jQuery plugin to help stylizing HTML selects
Turns humble elements into styleable drop-down menus for use in forms or general navigation.
A better select for discerning web developers everywhere.
Selectbox replacement with events, callbacks, themes and more.
Minimal select replacement with filtering, keyboard navigation and theme support.
A custom select for @twitter Bootstrap using button dropdown.
Populates a <select> with remote JSON data.
Select2 is a jQuery based replacement for select boxes. It supports searching, remote data sets, and infinite scrolling of results.