Font Awesome Bootstrap Checkboxes & Radios plugin. Pure CSS way to make inputs look prettier. No Javascript!

Now with Bootstrap 4 support!

Demo

First just include awesome-bootstrap-checkbox.css somewhere in your HTML, or add the equivalent files to your Sass configuration. Next, everything is based on code convention. Here is checkbox markup from Bootstrap site:

<form role="form"> ... <div class="form-check"> <label class="form-check-label"> <input class="form-check-input" type="checkbox"> Check me out </label> </div> ... </form>

We have to alter it a bit:

<form role="form"> ... <div class="form-check abc-checkbox"> <input class="form-check-input" id="checkbox1" type="checkbox"> <label class="form-check-label" for="checkbox1"> Check me out </label> </div> ... </form>

That's it. It will work. But it will not work if you nest input inside label or put label before input.

• Firefox (3.6+)
• Chrome (14+)
• IE (9+)
• Opera (11.6+)
• Safari (6+)

It's the same for radios. Markup has to be the following:

<form role="form"> ... <div class="form-check abc-radio"> <input class="form-check-input" type="radio" name="radio1" id="radio1" value="option1" checked> <label class="form-check-label" for="radio1"> One </label> </div> <div class="form-check abc-radio"> <input class="form-check-input" type="radio" name="radio1" id="radio2" value="option2"> <label class="form-check-label" for="radio2"> Two </label> </div> ... </form>

You may use abc-checkbox-primary, abc-checkbox-danger, abc-radio-info, etc to style checkboxes and radios with brand bootstrap colors.

abc-checkbox-circle is for rounded checkboxes.

Inputs without label text:

<div class="form-check abc-checkbox"> <input class="form-check-input" type="checkbox" id="singleCheckbox" value="option1" aria-label="Single checkbox One"> <label class="form-check-label" for="singleCheckbox"></label> </div>

As per example in the demo folder, to use Awesome Bootstrap Checkbox you'll have to @import the following library parts:

@import "../node_modules/bootstrap/scss/functions"; @import "../node_modules/bootstrap/scss/variables"; @import "../node_modules/bootstrap/scss/mixins"; @import "../node_modules/Font-Awesome/scss/variables"; @import "../awesome-bootstrap-checkbox";

Adjust this to the path where your bootstrap and font-awesome files are located.

If you want to use another icon font instead of Font Awesome, such as Glyphicons, override the default variables:

$font-family-icon: 'Glyphicons Halflings'; $check-icon: "\e013"; .abc-checkbox label:after { padding-left: 4px; padding-top: 2px; font-size: 9px; }

Or for plain CSS, override the .abc-checkbox class:

.abc-checkbox input[type=checkbox]:checked + label:after { font-family: 'Glyphicons Halflings'; content: "\e013"; } .abc-checkbox label:after { padding-left: 4px; padding-top: 2px; font-size: 9px; }

Based on the Bootstrap and the awesome Font Awesome.