Pure CSS Bootstrap Checkbox Replacement

Preview:

Description:

A pure CSS solution to beautify the default Bootstrap checkboxes without any images and JavaScript.

How it works:

• hide original check box
• find the nearest span with checkbox-placeholder class and draw custom checkbox
• draw checkmark before the span placeholder when original hidden input is checked
• when the checkbox is focused with tab key show dots arround

How to use it:

Load the checkbox-bootstrap.css in the head section that will provide the default styles for the Bootstrap checkboxes.

<link rel="stylesheet" href="checkbox-bootstrap.css">

Wrap the normal Bootstrap checkbox into a label element with the CSS class of ‘checkbox-placeholder’.

<label class="checkbox-bootstrap">                                        
  <input type="checkbox">             
  <span class="checkbox-placeholder"></span>           
  Checkbox
</label>

That’s it. Feel free to override the default CSS rules to create your own styles.