iCheck

 

Minimal Skin

Live

Color schemes

States

  • Normal

  • Hover

  • Checked

  • Disabled

  • Disabled & checked

 
GET CODE
<ul class="jf_iCheck_list"> 	<li> 		<input class="input_icheck_1" type="checkbox" id="minimal-checkbox-1"> 		<label for="minimal-checkbox-1">Checkbox 1</label> 	</li> 	<li> 		<input class="input_icheck_1" type="checkbox" id="minimal-checkbox-2" checked=""> 		<label for="minimal-checkbox-2">Checkbox 2</label> 	</li> 	<li> 		<input class="input_icheck_1" type="checkbox" id="minimal-checkbox-disabled" disabled=""> 		<label for="minimal-checkbox-disabled">Disabled</label> 	</li> 	<li> 		<input class="input_icheck_1" type="checkbox" id="minimal-checkbox-disabled-checked" checked="" disabled=""> 		<label for="minimal-checkbox-disabled-checked">Disabled &amp; checked</label> 	</li> </ul> <ul class="jf_iCheck_list"> 	<li> 		<input class="input_icheck_1" type="radio" id="minimal-radio-1" name="minimal-radio"> 		<label for="minimal-radio-1">Radio button 1</label> 	</li> 	<li> 		<input class="input_icheck_1" type="radio" id="minimal-radio-2" name="minimal-radio" checked=""> 		<label for="minimal-radio-2">Radio button 2</label> 	</li> 	<li> 		<input class="input_icheck_1" type="radio" id="minimal-radio-disabled" disabled=""> 		<label for="minimal-radio-disabled">Disabled</label> 	</li> 	<li> 		<input class="input_icheck_1" type="radio" id="minimal-radio-disabled-checked" checked="" disabled=""> 		<label for="minimal-radio-disabled-checked">Disabled &amp; checked</label> 	</li> </ul>

Square Skin

Live

Color schemes

States

  • Normal

  • Hover

  • Checked

  • Disabled

  • Disabled & checked

 
GET CODE
<ul class="jf_iCheck_list"> 	<li> 		<input type="checkbox" id="square-checkbox-1"> 		<label for="square-checkbox-1">Checkbox 1</label> 	</li> 	<li> 		<input type="checkbox" id="square-checkbox-2" checked=""> 		<label for="square-checkbox-2">Checkbox 2</label> 	</li> 	<li> 		<input type="checkbox" id="square-checkbox-disabled" disabled=""> 		<label for="square-checkbox-disabled">Disabled</label> 	</li> 	<li> 		<input type="checkbox" id="square-checkbox-disabled-checked" checked="" disabled=""> 		<label for="square-checkbox-disabled-checked">Disabled &amp; checked</label> 	</li> </ul> <ul class="jf_iCheck_list"> 	<li> 		<input type="radio" id="square-radio-1" name="square-radio"> 		<label for="square-radio-1">Radio button 1</label> 	</li> 	<li> 		<input type="radio" id="square-radio-2" name="square-radio" checked=""> 		<label for="square-radio-2">Radio button 2</label> 	</li> 	<li> 		<input type="radio" id="square-radio-disabled" disabled=""> 		<label for="square-radio-disabled">Disabled</label> 	</li> 	<li> 		<input type="radio" id="square-radio-disabled-checked" checked="" disabled=""> 		<label for="square-radio-disabled-checked">Disabled &amp; checked</label> 	</li> </ul>

Flat Skin

Live

Color schemes

States

  • Normal

  • Checked

  • Disabled

  • Disabled & checked

 
GET CODE
<ul class="jf_iCheck_list"> 	<li> 		<input class="input_icheck_2" type="checkbox" id="flat-checkbox-1"> 		<label for="flat-checkbox-1">Checkbox 1</label> 	</li> 	<li> 		<input class="input_icheck_2" type="checkbox" id="flat-checkbox-2" checked=""> 		<label for="flat-checkbox-2">Checkbox 2</label> 	</li> 	<li> 		<input class="input_icheck_2" type="checkbox" id="flat-checkbox-disabled" disabled=""> 		<label for="flat-checkbox-disabled">Disabled</label> 	</li> 	<li> 		<input class="input_icheck_2" type="checkbox" id="flat-checkbox-disabled-checked" checked="" disabled=""> 		<label for="flat-checkbox-disabled-checked">Disabled &amp; checked</label> 	</li> </ul> <ul class="jf_iCheck_list"> 	<li> 		<input class="input_icheck_2" type="radio" id="flat-radio-1" name="flat-radio"> 		<label for="flat-radio-1">Radio button 1</label> 	</li> 	<li> 		<input class="input_icheck_2" type="radio" id="flat-radio-2" name="flat-radio" checked=""> 		<label for="flat-radio-2">Radio button 2</label> 	</li> 	<li> 		<input class="input_icheck_2" type="radio" id="flat-radio-disabled" disabled=""> 		<label for="flat-radio-disabled">Disabled</label> 	</li> 	<li> 		<input class="input_icheck_2" type="radio" id="flat-radio-disabled-checked" checked="" disabled=""> 		<label for="flat-radio-disabled-checked">Disabled &amp; checked</label> 	</li> </ul>

Line Skin

Live

Color schemes

States

  • Normal

  • Hover

  • Checked

  • Disabled

  • Disabled & checked

 
GET CODE
<ul class="jf_iCheck_list"> 	<li> 		<input class="input_icheck_3" type="checkbox" id="line-checkbox-1"> 		<label for="line-checkbox-1">Checkbox 1</label> 	</li> 	<li> 		<input class="input_icheck_3" type="checkbox" id="line-checkbox-2" checked=""> 		<label for="line-checkbox-2">Checkbox 2</label> 	</li> 	<li> 		<input class="input_icheck_3" type="checkbox" id="line-checkbox-disabled" disabled=""> 		<label for="line-checkbox-disabled">Disabled</label> 	</li> 	<li> 		<input class="input_icheck_3" type="checkbox" id="line-checkbox-disabled-checked" checked="" disabled=""> 		<label for="line-checkbox-disabled-checked">Disabled &amp; checked</label> 	</li> </ul> <ul class="jf_iCheck_list"> 	<li> 		<input class="input_icheck_3" type="radio" id="line-radio-1" name="line-radio"> 		<label for="line-radio-1">Radio button 1</label> 	</li> 	<li> 		<input class="input_icheck_3" type="radio" id="line-radio-2" name="line-radio" checked=""> 		<label for="line-radio-2">Radio button 2</label> 	</li> 	<li> 		<input class="input_icheck_3" type="radio" id="line-radio-disabled" disabled=""> 		<label for="line-radio-disabled">Disabled</label> 	</li> 	<li> 		<input class="input_icheck_3" type="radio" id="line-radio-disabled-checked" checked="" disabled=""> 		<label for="line-radio-disabled-checked">Disabled &amp; checked</label> 	</li> </ul>

Polaris Skin

Live

States

  • Normal

  • Hover

  • Checked

  • Disabled

  • Disabled & checked

 
GET CODE
<ul class="jf_iCheck_list"> 	<li> 		<input class="input_icheck_4" type="checkbox" id="polaris-checkbox-1"> 		<label for="polaris-checkbox-1">Checkbox 1</label> 	</li> 	<li> 		<input class="input_icheck_4" type="checkbox" id="polaris-checkbox-2" checked=""> 		<label for="polaris-checkbox-2">Checkbox 2</label> 	</li> 	<li> 		<input class="input_icheck_4" type="checkbox" id="polaris-checkbox-disabled" disabled=""> 		<label for="polaris-checkbox-disabled">Disabled</label> 	</li> 	<li> 		<input class="input_icheck_4" type="checkbox" id="polaris-checkbox-disabled-checked" checked="" disabled=""> 		<label for="polaris-checkbox-disabled-checked">Disabled &amp; checked</label> 	</li> </ul> <ul class="jf_iCheck_list"> 	<li> 		<input class="input_icheck_4" type="radio" id="polaris-radio-1" name="polaris-radio"> 		<label for="polaris-radio-1">Radio button 1</label> 	</li> 	<li> 		<input class="input_icheck_4" type="radio" id="polaris-radio-2" name="polaris-radio" checked=""> 		<label for="polaris-radio-2">Radio button 2</label> 	</li> 	<li> 		<input class="input_icheck_4" type="radio" id="polaris-radio-disabled" disabled=""> 		<label for="polaris-radio-disabled">Disabled</label> 	</li> 	<li> 		<input class="input_icheck_4" type="radio" id="polaris-radio-disabled-checked" checked="" disabled=""> 		<label for="polaris-radio-disabled-checked">Disabled &amp; checked</label> 	</li> </ul>

Futurico Skin

Live

States

  • Normal

  • Checked

  • Disabled

  • Disabled & checked

 
GET CODE
<ul class="jf_iCheck_list"> 	<li> 		<input class="input_icheck_5" type="checkbox" id="futurico-checkbox-1"> 		<label for="futurico-checkbox-1">Checkbox 1</label> 	</li> 	<li> 		<input class="input_icheck_5" type="checkbox" id="futurico-checkbox-2" checked=""> 		<label for="futurico-checkbox-2">Checkbox 2</label> 	</li> 	<li> 		<input class="input_icheck_5" type="checkbox" id="futurico-checkbox-disabled" disabled=""> 		<label for="futurico-checkbox-disabled">Disabled</label> 	</li> 	<li> 		<input class="input_icheck_5" type="checkbox" id="futurico-checkbox-disabled-checked" checked="" disabled=""> 		<label for="futurico-checkbox-disabled-checked">Disabled &amp; checked</label> 	</li> </ul> <ul class="jf_iCheck_list"> 	<li> 		<input class="input_icheck_5" type="radio" id="futurico-radio-1" name="futurico-radio"> 		<label for="futurico-radio-1">Radio button 1</label> 	</li> 	<li> 		<input class="input_icheck_5" type="radio" id="futurico-radio-2" name="futurico-radio" checked=""> 		<label for="futurico-radio-2">Radio button 2</label> 	</li> 	<li> 		<input class="input_icheck_5" type="radio" id="futurico-radio-disabled" disabled=""> 		<label for="futurico-radio-disabled">Disabled</label> 	</li> 	<li> 		<input class="input_icheck_5" type="radio" id="futurico-radio-disabled-checked" checked="" disabled=""> 		<label for="futurico-radio-disabled-checked">Disabled &amp; checked</label> 	</li> </ul>

 
 
iCheck plugin (Super Customized Checkboxes and Radio Buttons) by Damir Foy (https://github.com/damirfoy/iCheck)