Pure CSS Bootstrap Checkbox Replacement

Category: CSS & CSS3 , Form | October 6, 2016
Views Total:2,626 views
Official Page:Go to website
Last Update:October 6, 2016


Pure CSS Bootstrap Checkbox Replacement


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>           

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

You Might Be Interested In:

Leave a Reply