#What does it do?

This plugin replaces the default checkboxes and radio inputs for better looking ones. Check the landing page for a demo.

##Features:

• Compatible with IE7+, Chrome, Firefox, Safari and mobile browsers;
• Automatic Labee Detection, which will help you implment structed programming
• 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.

##Install & Setup

<link rel="stylesheet" href="js/prettyCheckable/prettyCheckable.css">

<script src="js/prettyCheckable/prettyCheckable.js"></script>

Write your inputs and add a class for the jQuery selector:

<input type="checkbox" class="myClass" value="yes" id="answer" name="answer"/>

Setup prettyCheckable for your inputs and you're all set:

$().ready(function(){

  $('input.js-pretty-select').prettyCheckable();

});

You can start the plugin with the options you see on the documentation bellow and they will be applied to all matching inputs:

$().ready(function(){

  $('input.js-pretty-select').prettyCheckable({
    color: 'red'
  });

});

If you want to apply something to all the inputs but you need a few specific ones to be different, you can add the specifics inline:

<input type="checkbox" class="myClass" value="yes" id="answer" name="answer" data-color="green" />

##Documentation

###Label Association

	

		
		Active?
	

In this scenario the Label Active? will be automagically added to Pretty checkbox. This will let you write code which will work smooth even without js

None of the parameters is mandatory.

###Options

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

###Inline Options

All inline configs will overwrite the ones you initialized the plugin with.

Name	Values	Description
data-label	string Text for your label	If informed, this will create a label attached to the input.
data-labelPosition	string left, right(default)	This is the position where the label for the inputs should be placed, if informed.
data-customClass	string A class name.	This will add a class you want to the wrapping div surrounding the input, created by the plugin.
data-color	string blue(default), green, yellow or red	Choose between one of the four colors options.

###Support

• Reach me at http://subin.me