Author: | Artur-A |
---|---|
Views Total: | 2,456 views |
Official Page: | Go to website |
Last Update: | October 6, 2016 |
License: | MIT |
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.