July 27 2016

Bootstrap glyphicons checkbox

Tagged Under : ,

Because the default HTML chekcbox look not nice, So i decided use Boostrap Glyphicons as the checkbox and also it got provide checked and uncheck glyphicons.

Glyphicons check and uncheck icon:


To use the Bootstrap glyphicons for checkbox. you may need to add the CSS class as below: 
input[type='checkbox'] {
    display:none;
}
input[type='checkbox'] + label:before, input[type='checkbox'] + label:after{
    position: relative;
    top: 1px;
	left: -2px;
    display: inline-block;
    font-family: 'Glyphicons Halflings';
    font-style: normal;
    font-weight: 400;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
/*unchecked icon*/
input[type='checkbox'] + label:before{
    content: "\e157";
}
/*checked icon*/
input[type='checkbox']:checked + label:before{
    content: "\e067";
}

And the Html Code was like this: 
<input type="checkbox" id="checkbox2"/>
<label for='checkbox2'>Boostrap Checkbox</label>

Or you may click here for the DEMO

Related Posts

Posted by chevrons in Bootstrap, CSS3
No Comments

Make a Comment

You must be logged in to post a comment.