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 & 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 & 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 & 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 & 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 & 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 & 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 & 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 & 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 & 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 & 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 & 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 & checked</label> </li> </ul>
iCheck plugin (Super Customized Checkboxes and Radio Buttons) by Damir Foy (https://github.com/damirfoy/iCheck)
Leave A Comment