flatlogic / awesome-bootstrap-checkbox

✔️Font Awesome Bootstrap Checkboxes & Radios. Pure css way to make inputs look prettier

🤘 Awesome Bootstrap Checkbox

View Demo | Download | More templates | Support forum

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

For Bootstrap 4 version please checkout bump-to-bootstrap4 branch

For Bootstrap 5 version please checkout bump-to-bootstrap5 branch

Check out our React/Vue/Angular/Node.js boilerplates

Flatlogic Templates - 💥Free and open-source application boilerplates built with Bootstrap 5, React, Vue, Angular, Node.js

Use

To install latest version via NPM simply run:

$ npm install awesome-bootstrap-checkbox # for Bootstrap 4 version
$ npm install [email protected] # for Bootstrap 3 version

There is a separate README.md file for Bootstrap 4 version.

Then just include awesome-bootstrap-checkbox.css somewhere in your HTML, or add the equivalent files to your Sass / Less 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">
    <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.

If you want to enable Opera 12 and earlier support just add class styled to input element:

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

Browser support

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

Radios

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

<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>

Brand Colors and other features

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

checkbox-circle is for rounded checkboxes.

Inputs without label text:

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

Using Sass

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.

Using Less

Just like the Sass setup, you'll have to @import the following library parts:

@import "../bower_components/bootstrap/less/variables";
@import "../bower_components/bootstrap/less/mixins";

@import "../awesome-bootstrap-checkbox";

@import "../bower_components/Font-Awesome/less/variables";

Custom icon font

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";

.checkbox label:after {
    padding-left: 4px;
    padding-top: 2px;
    font-size: 9px;
}

or for Less:

@font-family-icon: 'Glyphicons Halflings';
@check-icon: "\e013";

// Same styles as the Sass example...

Or for plain CSS, override the .checkbox class (and .styled class for Opera):

input[type="checkbox"].styled:checked + label:after,
input[type="radio"].styled:checked + label:after,
.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,
.checkbox label:after {
    padding-left: 4px;
    padding-top: 2px;
    font-size: 9px;
}

How can I support developers?

• Star our GitHub repo ⭐
• Create pull requests, submit bugs, suggest new features or documentation updates 🔧
• Follow us on Twitter 🐾
• Like our page on Facebook 👍

Support

For any additional information please go to our support forum and raise your questions or feedback provide there. We highly appreciate your participation!

More from Flatlogic

• React Native Starter - 🚀 A powerful react native starter template that bootstraps development of your mobile application
• Sing App Dashboard - 💥 Free and open-source admin dashboard template built with Bootstrap 4
• React Material Admin - ⚡ Admin boilerplate made with React 17 and Material-UI 5

Credits

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

awesome-bootstrap-checkbox's Issues

Demo link is broken

The link to your demo returns a 404 error.

Version 0.3.7 not on npm

Hi,

the version currently deployed on npm ( https://www.npmjs.com/package/awesome-bootstrap-checkbox) is 0.3.6.

Unfortunately this version produces build errors concerning @fa-var-check that are fixed in 0.3.7.

Is there any reason 0.3.7 is not puplished on npm?

Regards,

Lucas

radio buttons

On Safari (mac, 8.0.3 and later), if you click on a radio button all what is below blinks (very quickly). You can see it on the demo page when clicking on one of the radio buttons at the end. You don't have this effect on Firefox or Chrome.

Doesn't work with checkbox-inline

Styles don't include checkbox-inline. I may tinker with things and do a pull request when I get time.

The "checked" mark is invisible

Something strange is going on, the "checked" mark is invisible. My import order is 1. css, 2. js, 3. initialize js

Mention in docs that Font Awesome or Glyphicons dependency has to be specified explicitly

As per #26 discussion

Build instructions?

It's unclear to me what the preferred way to build this is. I used sass/less via command line to build it with the build scripts in the demo directory but I was wondering if that is the "right" way you intended to do it. It'd be nice if the sass or less file was the master copy and built into the other two formats using a tool like gulp or grunt.

npm package request

Hello,
please can you add this project package to npm as you did in bower?
Thank you.

Checkboxes don't work with Spring MVC JSTL

Hi! First of all: Great work! Unfortunately, the checkboxes do not seem to work with Spring MVC JSTL. There seems to be a problem with the hidden input field that is inserted by the form:checkbox tag automatically after the checkbox input field. Here is an example of how the generated HTML looks like:

<div class="checkbox checkbox-primary"> <input id="checkbox1" name="enabled" type="checkbox" value="true"/><input type="hidden" name="_enabled" value="on"/> <label for="checkbox1">Primary</label> </div>

When I remove the hidden field or move it after the label it works fine (but this is of course not really an option here). I tested this with both Chrome and Firefox.

Does not work with keyboard

Great piece of work!

Is there any workaround to include the use of keyboard?
When I press TAB it just jumps to the next input after the radio, the radiobuttons won't hold focus.

Less variable @fa-var-check

Hi;
In Less file there is this variable: @fa-var-check.
Where is it defined? Do I need to have font-awesome less package?

Thanks

Labels without "for" attribute

Hi guys, I had difficulties using your library when building a web app. I had no unique ID for checkboxes and radios to pair them with labels. Only solution was to generate random ID and then use it.

I've found a solution to design checkboxes and radios in your way using your library with checkboxes (radios) nested inside of a label (no "for" and "id" attribute needed). I wish to present it to others. What's the best way to do it? Should I modify your files, or create new files or just fork your whole project and make a new one?

This could be my first contribution so I am sorry I don't know exactly, how it works :-)

Possibility to render radios as checkboxes (and vice versa?)

Hi, I love this script. I'd love to see possilbility of rendering radios as checkboxes. I understand if you don't want to implement it (as it's 50% css filesize more), but still - it would be awesome.

Thanks

Tab + Enter

If you tab through checkboxes and hit enter the checkbox won't be selected.

In IE it is not pixel perfect.

Have not found any way to fix the css myself. IE-checkboxes ticks are slightly lower.

Integration into simple_form

I have spent days to try integrating your css into the simple_form gem, however, with no success.
I tried adding a class into the input column, but it seems not working.

f.input :options, as: :boolean, inline_label: 'Option 1', label: false, :class => "checkbox  checkbox-primary"

Please advise.

update bootstrap & fontawesome to latest version

it's already BS 3.3 available and FA 4.0. Please update

Doesn't work in Django: Templating engine doesn't allow you to put <label> tags after <input> tags.

In Django's form templating language, you can either lay out your HTML like so:

<label>
    <input> Foo
</label>

which is generated by the templating syntax:

{{ form.field }}

or you can do:

<label>Description</label>
<input> Foo

which is generated by the templating syntax:

{{ form.field.label_tag }}
{{ form.field }}

but you can't put a <label> tag after an <input> tag (which is required for this library to function):

<input> Foo
<label>Description</label>

because if you try to use the following templating syntax:

{{ form.field }}
{{ form.field.label_tag }}

you will get this instead:

<label>
    <input> Foo
</label>
<label>Description</label>

Checkbox without label

Would be nice to support single controls without displaying the label (useful for checkboxes in tables for example).

Here's what I used:

.checkbox.checkbox-single {
    label {
        width: 0;
        height: 16px;
        visibility: hidden;
        &:before, &:after {
            visibility: visible;
        }
    }
}

Checkboxes doesn't work with Opera

Seems like opera has some issues with complicated selectors like that:

.checkbox input[type="checkbox"]:checked + label::after {
    font-family: 'FontAwesome';
    content: "\f00c"; 
}

Checked in Opera 12.17, Windows

Jquery change event problem

When I use html from example and add a class to the checkbox, I can't get Jquery change event to fire. Any solution to this problem?

$('.checkboxSort').change(function () {
alert("Checkbox clicked");
});

Mouse events not reaching checkbox

I encountered a problem where mouse events were not passing through the pseudoelement to the underlying checkbox. (Firefox 34 and Safari 8 on MacOS 10.10.)

I was able to fix it by adding "pointer-events: none;" to the .checkbox label::before/after selectors. Not sure if this is a good fix, though!

Checkbox with label on the left

Impossible to have a label on the left and the checkbox on the right?
What could I do to change that?

Possible to remove blue glow?

I'm trying to remove the blue glow on a focused checkbox but nothing is working so far. I'm trying something like:

#checkbox1:focus {
  outline: 0px !important;
  -webkit-appearance:none !important;

  -webkit-box-shadow: none !important;
  -moz-box-shadow: none !important;
  box-shadow: none !important;
}

But I still get the glow. Any suggestions?

Thanks

Formalize the font-awesome dependency

Hello,

Looks like there is an actual, existing dependency on font-awesome but fa isn't in the bower.json. I see PR #26 addresses this but just wanted to make sure there was an issue for this as well.

The demo appears to correctly link to bower_components so my guess is that a --save just got missed at some point.

Cheers.

Jquery Check AND Uncheck Checkbox

Hi Guys
First, Thank You
Have a problem
how check and uncheck with jquery ?
with jquery, when uncheck checkboxs , yet checkboxs are selected

MyCode

        if($(this).is(':checked')){
            $("#pages-result input[type='checkbox']").each(function(){
                $(this).attr("checked","checked");
            });
        }else{
            $("#pages-result input[type='checkbox']").each(function(){
                $(this).removeAttr("checked");
            });
        }

Vertical align middle

Aligning vertically in the middle does not seem to work, no matter what I've tried.
Any suggestions are appreciated

Thanks!

Checkmarks are little squares instead of checkmarks

Hi there,
I downloaded the zip and opened the index.html under the demo directory. The page looks exactly like your online demo with the exception that the checkmark boxes show a square instead of the checkmark.

Not sure what I am doing incorrectly
Jeff

Forget this issue, posted in wrong project.

Forget this issue, posted in wrong project.

Improvements

Don't know should I post this issue here or for https://github.com/nghuuphuoc/bootstrapvalidator but either ways, these two don't work together, atleast not for me.

1st improvement:

.checkbox input[type=radio],
.checkbox input[type=checkbox] {
        position: absolute;
        left: -1000px;
}

I think using this method instead of display: none; is better, but correct me if I'm wrong. Atleast in my case, this made bootstrapValidator validate my checkboxes/radiobuttons also.

2nd "improvement":
This should probably be reported for bootstrapValidator, instead of here?
I had change every sibling selectors from + into ~ to make this work (not the best possible way to make it work though):

...
...
.checkbox input[type=checkbox]:checked ~ label:after {
    font-family: 'FontAwesome';
    content: "\f00c"; }
.checkbox input[type=checkbox]:disabled ~ label {
    opacity: 0.65; }
.checkbox input[type=checkbox]:disabled ~ label:before {
    background-color: #eeeeee;
...
...

Reason why I had to do this change is because bootstrapValidator places feedback icons () immediately after elements:

<div class="form-group has-feedback">
  <div class="col-sm-8 col-sm-offset-3">
    <div class="checkbox">
      <input type="checkbox" name="terms" id="terms" value="1" required="" data-bv-field="terms" />
      <i class="form-control-feedback" data-bv-field="terms" style="display: none;"></i>
      <label for="terms">I accept the terms of use</label>
    </div>
  <small data-bv-validator="notEmpty" class="help-block" style="display: none;">You must accept the terms of use</small></div>
</div>

Anyway, keep up the good work 👍 :)

CSS class name conflict

I ran into problem since this library is binding itself directly into "checkbox" class of bootstrap. I had existing code, which is using checkbox (part of that inside library which I cannot change), and applying a-b-c into use broken all checkboxes in this context.

My workaround (and proposed fix) is to add "aw-" prefix into all styles and a-b-c and and have it used something like this "checkbox aw-checkbox aw-checkbox-primary".

Font Awesome not necessary

I use awesome-bootstrap-checkbox without font-awesome (I actually use bootstrap's glyphicon font instead) and I think this might be interesting for others. As far as I can see awesome-bootstrap-checkbox uses only one (!) icon from font-awesome.

I simply add the following to my less code after the @import of awesome-bootstrap-checkbox:

@import "../bower_components/awesome-bootstrap-checkbox/awesome-bootstrap-checkbox.less";

@font-family-icon: 'Glyphicons Halflings';
@fa-var-check: "\e013";

.checkbox label::after {
  font-size: 10px;
}

Maybe you could add this to the documentation or even add some kind of configuration option for choosing the icon font.

Use @input-color for checkbox

It makes much more sense just to use @input-color to color the checkboxes. Currently, it uses @gray which does map out to @input-color but when I am customizing my bootstrap variables, I don't want to change my @lighter-gray, I change the @input-color for my inputs.

does not work when checkbox is within label

Its not uncommon for the checkbox html to look like this:

<label><input type='checkbox'> Foo</label>

this does not work with current css.

Great job though, ill keep an eye out for improvements :)

Browser compatibility

Is there a browser compatibility list/table somewhere?

If not, there should be such a thing in the documentation... hint hint! :-)

right aligned, inline checkboxes/radios don't work

Well, they kind of do, but the tick does appear correctly centred.

Bootstrap 4 update

There are should be a separate branch of awesome-bootstrap-checkbox based on Bootstrap 4 version.

Sizes

Is there a way we could incorporate the BS sizes

such as checkbox-xs, checkbox-sm, checkbox-lg etc and refactor the size of the checkbox accordingly?

Thanks

Frameworks That Generate a Hidden Input Break

Example:

<div class="checkbox" >
                        <input class="inline-block" data-val="true" data-val-required="'Restricted Use Product' must not be empty." id="RestrictedUseProduct" name="RestrictedUseProduct" type="checkbox" value="true">
                        <input name="RestrictedUseProduct" type="hidden" value="false">
                        <label for="RestrictedUseProduct">Restricted Use Product</label>
</div>

The example shows the html generated from html helpers in .net MVC or Ruby on Rails. I fixed my problem by using the ~ selector in the file instead of the + selector. Not sure if this is the best solution in the long run though.

Does not work with asp.net mvc taghelpers

The html helpers in the razor syntax generate an additional hidden input which causes this checkbox library to not work

radio-single does not exist

In the documentation there is a reference to radio-single, however this is nowhere to be found in the css file.

awesome-bootstrap-checkbox breaks with Pipeline

Hey,

since your demo/bootstrap.css references nonexistent font files, django-pipeline breaks.

Please fix it.

indeterminate checkbox state

Current styles doesn't support the indeterminate states. I know that css can't handle the indeterminate property, but you can support indeterminate states with additional css classes. For ex. when checkbox is indeterminate I can add the checkbox-indeterminate class to wrapper. Just need style this class.

Checkbox invisible on IE8

Could you please do a check on IE8, the checkbox and radio are all invisible. Can you update to fix this issue? or this plugin doesn't support IE8?

Add Bootstrap 2.x support/branch

I have some project with Bootstrap 2.3.x. So I was required to change this lines to make it works:

.checkbox label::after {
    left: 1px;
    top: -1px;
}

.radio label::after {
    left: 4px;
    top: 4px;
}

Maybe there's another workaround?

Re-Validating Awesome bootstrap Checkbox using FormValidatio.IO

How to revalidate Awesome Bootstrap Checkbox using Formvalidation.IO ..Revalidate is not Working ...
How to fire revalidate event in Formvalidatio.IO for Awesome Bootstrap Checkbox.
Can Anyone Help me??

LESS file

Would be nice if you could create a maintained less version for every version, since bootstrap official repo also uses less and I would like to be able to customize bootstrap and awesome bootstrap checkbox in one workflow.

RTL support

//
// Checkboxes
// --------------------------------------------------

@font-family-icon: 'FontAwesome';

.checkbox-variant(@parent, @color) {
  .@{parent} input[type="checkbox"]:checked + label {
    &::before {
      background-color: @color;
      border-color: @color;
    }
    &::after {
      color: #fff;
    }
  }
}


.checkbox{
  padding-left: 20px;

  label{
    display: inline-block;
    vertical-align: middle;
    position: relative;
    padding-left: 5px;

    &::before{
      content: "";
      display: inline-block;
      position: absolute;
      width: 17px;
      height: 17px;
      left: 0;
      margin-left: -20px;
      border: 1px solid @input-border;
      border-radius: 3px;
      background-color: #fff;
      .transition(~"border 0.15s ease-in-out, color 0.15s ease-in-out");
    }

    &::after{
      display: inline-block;
      position: absolute;
      width: 16px;
      height: 16px;
      left: 0;
      top: 0;
      margin-left: -20px;
      padding-left: 3px;
      padding-top: 1px;
      font-size: 11px;
      color: @input-color;
    }
  }

  input[type="checkbox"]{
    opacity: 0;
    z-index: 1;

    &:focus + label::before{
      .tab-focus();
    }

    &:checked + label::after{
      font-family: @font-family-icon;
      content: @fa-var-check;
    }

    &:disabled + label{
      opacity: 0.65;

      &::before{
        background-color: @input-bg-disabled;
        cursor: not-allowed;
      }
    }

  }

  &.checkbox-circle label::before{
    border-radius: 50%;
  }

  &.checkbox-inline{
    margin-top: 0;
  }
  &.rtl {
    padding-left: 0;
    padding-right: 20px;

    label{
      padding-right: 5px;

      &::before{
        left: auto;
        right: 0;
        margin-left: 0;
        margin-right: -20px;
      }

      &::after{
        left: auto;
        right: 0;
        margin-left: 0;
        margin-right: -20px;
        padding-left: 0;
        padding-right: 3px;
      }
    }
  }
}

.checkbox-variant(checkbox-primary, @brand-primary);
.checkbox-variant(checkbox-danger, @brand-danger);
.checkbox-variant(checkbox-info, @brand-info);
.checkbox-variant(checkbox-warning, @brand-warning);
.checkbox-variant(checkbox-success, @brand-success);

//
// Radios
// --------------------------------------------------

.radio-variant(@parent, @color) {
  .@{parent} input[type="radio"]{
    & + label{
      &::after{
        background-color: @color;
      }
    }
    &:checked + label{
      &::before {
        border-color: @color;
      }
      &::after{
        background-color: @color;
      }
    }
  }
}

.radio{
  padding-left: 20px;

  label{
    display: inline-block;
    vertical-align: middle;
    position: relative;
    padding-left: 5px;

    &::before{
      content: "";
      display: inline-block;
      position: absolute;
      width: 17px;
      height: 17px;
      left: 0;
      margin-left: -20px;
      border: 1px solid @input-border;
      border-radius: 50%;
      background-color: #fff;
      .transition(border 0.15s ease-in-out);
    }

    &::after{
      display: inline-block;
      position: absolute;
      content: " ";
      width: 11px;
      height: 11px;
      left: 3px;
      top: 3px;
      margin-left: -20px;
      border-radius: 50%;
      background-color: @input-color;
      .scale(0, 0);

      .transition-transform(.1s cubic-bezier(.8,-0.33,.2,1.33));
      //curve - http://cubic-bezier.com/#.8,-0.33,.2,1.33
    }
  }

  input[type="radio"]{
    opacity: 0;
    z-index: 1;

    &:focus + label::before{
      .tab-focus();
    }

    &:checked + label::after{
      .scale(1, 1);
    }

    &:disabled + label{
      opacity: 0.65;

      &::before{
        cursor: not-allowed;
      }
    }

  }

  &.radio-inline{
    margin-top: 0;
  }
  &.rtl {
    padding-left: 0;
    padding-right: 20px;

    label{
      padding-left: 0;
      padding-right: 5px;

      &::before{
        left: auto;
        right: 0;
        margin-left: 0;
        margin-right: -20px;
      }

      &::after{
        left: auto;
        right: 3px;
        margin-left: 0;
        margin-right: -20px;
      }
    }
  }
}

.radio-variant(radio-primary, @brand-primary);
.radio-variant(radio-danger, @brand-danger);
.radio-variant(radio-info, @brand-info);
.radio-variant(radio-warning, @brand-warning);
.radio-variant(radio-success, @brand-success);

input[type="checkbox"] {
  &.styled:checked + label:after {
    font-family: 'FontAwesome';
    content: "\f00c";
  }
  & .styled:checked + label {
    &::before {
      color: #fff;
    }
    &::after {
      color: #fff;
    }
  }
}

CSS Not included for Bower

I use VS2015 and been working with MVC6. I installed this via Bower but noticed it doesnt have the pre-compiled CSS like almost all other bower repos do

Component outline