A light and simple way to custom your form checkboxes.
This library hides the checkboxes designated as to be customized, and creates graphic clones from <div> tags.
Checked state is synchronized between them.
This version is the 1.0.0 stable version, this should work smoothly on most browsers.
- Copy this project in your vendor/ directory
- Link the
styles.min.cssCSS between the<head>and closing</head>tags
<head>
<link rel="stylesheet" media="screen" href="vendor/custom-checkboxes-master/themes/styles.min.css" type="text/css">
</head>- Call the custom checkboxes library before the closing
</body>tag and call immediately after thecustCbx()function:
<script type="text/javascript" src="vendor/custom-checkboxes-master/js/customCheckboxes_1.0.min.js"></script>
<script>
custCbx();
</script>
</body>Add the custCbx class to all checkboxes to customize.
Notice: All checkboxes must have an id.
Notice: Checkboxes can be prechecked.
You can add styling classes:
custCbx-square
custCbx-rounded
custCbx-round
custCbx-tick
custCbx-cross
custCbx-fading
custCbx-checking
custCbx-crossing-out
custCbx-black
custCbx-grey
custCbx-white
custCbx-blue
custCbx-red
custCbx-violet
custCbx-green
You can mix shape / animation / color classes as in this example: 
Feel free to edit the styles.css and create your own styles!
Warning: Only one class of each category can be used. In case of multiple classes from a same category, only the first one will be used.
- custCbxCheckAll(): check all custom checkboxes on the page
- custCbxUncheckAll(): uncheck all custom checkboxes on the page
- custCbxStatus(itemId): return the check state of a checkbox
<html>
<head>
<link rel="stylesheet" media="screen" href="vendor/custom-checkboxes-master/themes/styles.min.css" type="text/css" >
</head>
<body>
<p>
<input id="checkbox1" type="checkbox" class="custCbx custCbx-fading">
<label for="checkbox1">Hit me!</label>
</p>
<p>
<input id="checkbox2" type="checkbox" class="custCbx custCbx-round custCbx-red">
<label for="checkbox2">Hit me too!</label>
</p>
<p>
<input id="checkbox3" type="checkbox" class="custCbx custCbx-checking" checked>
<label for="checkbox3">Already checked</label>
</p>
<script type="text/javascript" src="vendor/custom-checkboxes-master/js/customCheckboxes_1.0.min.js"></script>
<script>
custCbx();
</script>
</body>
</html>