Pure CSS Bootstrap Checkbox Replacement

Category: CSS & CSS3 , Form | October 6, 2016
Author: Artur-A
Views Total: 3,476
Official Page: Go to website
Last Update: October 6, 2016
License: MIT

Preview:

Pure CSS Bootstrap Checkbox Replacement

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.

You Might Be Interested In:


Leave a Reply