Skip to content
A light and simple way to custom your form checkboxes
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Type Name Latest commit message Commit time
Failed to load latest commit information.

Custom checkboxes

A light and simple way to custom your form checkboxes.

How it works

This library hides the checkboxes designated as to be customized, and creates graphic clones from <div> tags. Checked state is synchronized between them.

Project status

This version is the 1.0.0 stable version, this should work smoothly on most browsers.


  1. Copy this project in your vendor/ directory
  2. Link the styles.min.css CSS between the <head> and closing </head>tags
    <link rel="stylesheet" media="screen" href="vendor/custom-checkboxes-master/themes/styles.min.css" type="text/css">
  1. Call the custom checkboxes library before the closing </body> tag and call immediately after the custCbx() function:
  <script type="text/javascript" src="vendor/custom-checkboxes-master/js/customCheckboxes_1.0.min.js"></script>


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:

Manage shape (default: square)

  • custCbx-square custCbx-square
  • custCbx-rounded custCbx-rounded
  • custCbx-round custCbx-round
  • custCbx-tick custCbx-tick
  • custCbx-tick custCbx-cross

Manage animation (default: no animation)

  • custCbx-fading custCbx-fading
  • custCbx-checking custCbx-checking
  • custCbx-checking custCbx-crossing-out

Manage color (default: black)

  • custCbx-black custCbx-black
  • custCbx-grey custCbx-grey
  • custCbx-white custCbx-white
  • custCbx-blue custCbx-blue
  • custCbx-red custCbx-red
  • custCbx-violet custCbx-violet
  • custCbx-green custCbx-green

You can mix shape / animation / color classes as in this example: custCbx-mixed-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.

Specific actions

  • 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


    <link rel="stylesheet" media="screen" href="vendor/custom-checkboxes-master/themes/styles.min.css" type="text/css" >
      <input id="checkbox1" type="checkbox" class="custCbx custCbx-fading">
      <label for="checkbox1">Hit me!</label>

      <input id="checkbox2" type="checkbox" class="custCbx custCbx-round custCbx-red">
      <label for="checkbox2">Hit me too!</label>

      <input id="checkbox3" type="checkbox" class="custCbx custCbx-checking" checked>
      <label for="checkbox3">Already checked</label>
    <script type="text/javascript" src="vendor/custom-checkboxes-master/js/customCheckboxes_1.0.min.js"></script>

You can find a full demo here. More details on my blog.

You can’t perform that action at this time.