jquery radio button and check box design prettyCheckable

This plugin replaces the default checkboxes and radio inputs for better looking ones.

Demo: Check the demo
URL: http://arthurgouveia.com/prettyCheckable/
Download: Jquery and Css

Features:
  • Compatible with IE7+, Chrome, Firefox, Safari and mobile browsers;
  • Custom design, kindly provided by Bruno O. Barros;
  • Four color options (Twitter bootstrap) + editable PSD;
  • Better look & size;
  • Super easy implementation;
  • Selectable with Tab and checkable with keyboard;
  • Change events & Chainning preserved;
  • More area of click/touch. A plus for mobile devices;
Using
$('input[type=checkbox]').prettyCheckable();
$('input[type=radio]').prettyCheckable();​
$('input.myClass').prettyCheckable();
$('input.myClass').prettyCheckable({
    color: 'red'
  });

Options

  • labelPosition: This is the position where the label for the inputs should be placed, if informed. Default is right.
  • customClass: This will add a class you want to the wrapping div surrounding the input, created by the plugin.
  • color: Choose between one of the four colors options (blue(default), green, yellow or red).

This plugin also provide facility to provide inline options. All inline configs will overwrite the ones you initialized the plugin with.

  • data-label: If informed, this will create a label attached to the input.
  • data-labelPosition: This is the position where the label for the inputs should be placed, if informed.
  • data-customClass: This will add a class you want to the wrapping div surrounding the input, created by the plugin.
  • data-color: Choose between one of the four colors options (blue(default), green, yellow or red).
<input type="checkbox" class="myClass" value="yes" id="answer" name="answer" data-color="green" />


Customization

If you want to create your own designed checkboxes or you just need a different color set, download the prettyCheckable PSD, do whatever you need to, add the entries to your CSS and pass the name of your color/style in the color or customClass parameters, according to the CSS code you can see on prettyCheckable.css
jquery radio button and check box design prettyCheckable jquery radio button and check box design prettyCheckable Reviewed by Bhaumik Patel on 10:38 PM Rating: 5