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

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="checkbox"> <label> <input type="checkbox"> Check me out </label> </div> ... </form>

We have to alter it a bit:

<form role="form"> ... <div class="checkbox abc-checkbox"> <input type="checkbox" id="checkbox1"> <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="radio abc-radio"> <input type="radio" name="radio2" id="radio3" value="option1"> <label for="radio3"> One </label> </div> <div class="radio abc-radio"> <input type="radio" name="radio2" id="radio4" value="option2" checked> <label for="radio4"> 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.

abc-checkbox-single and abc-radio-single for inputs without label text.

Inputs without label text:

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

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

@import "../bower_components/bootstrap-sass-official/assets/stylesheets/bootstrap/variables"; @import "../bower_components/bootstrap-sass-official/assets/stylesheets/bootstrap/mixins"; @import "../bower_components/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 (and .styled class for Opera):

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

Based on the Official Bootstrap Sass port and the awesome Font Awesome.