Awesome Bootstrap checkboxes and radios

No JS, just pure css way to make inputs look much nicer! Try awesome Bootstrap checkboxes and radios solution.

(Font) Awesome Bootstrap checkboxes and radios!

We can recommend this solution with clear conscience to everyone, who wants to create nice looking UI in forms – checkbox inputs and radios. Pure CSS way to make inputs look prettier. No Javascript!

Browser support:

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

Usage

Simply include awesome-bootstrap-checkbox.css somewhere in HTML document, or add the equivalent files to Sass / Less configuration.

Then everything is based on code convention. Some examples:

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

That’s it. But please not that it will not work if you nest input inside label or put label before input.

To enable Opera 12 and earlier support just add class styled to input element:

...
<input type="checkbox" id="checkbox1" class="styled">
...

For radios we do it in a similar way:

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

We can use checkbox-primary, checkbox-danger, radio-info, and others, to style checkboxes and radios with brand bootstrap colors.

Another example – inputs without label text:

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

License: MIT

Demo:

http://flatlogic.github.io/awesome-bootstrap-checkbox/demo

Get awesome Bootstrap checkboxes from GitHub:

https://github.com/flatlogic/awesome-bootstrap-checkbox

You may also like:

Checkbox toggle with Bootstrap

Google plus like jQuery drop down box

jQuery plugin for custom checkboxes and radio buttons – wCheck

Checkboxradio – jQuery checkbox replacement plugin

jQuery stackoverflow voting widget – Upvote

A nice and intuitive Bootstrap grid control – jQuery bootgrid

Enjoy!