• Vanilla
X

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
  • JavaScript is still needed to fix specific issues
  • While CSS3 method is quite limited solution, iCheck is made to be an everyday replacement covering most of the tasks.

 

Features

  • 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)
  • jQuery and Zepto JavaScript libraries support from single file
  • 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

 

  • Vanilla
X

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.