"Checkbox/Radio - CSS Only"
Bootstrap 3.2.0 Snippet by tonetlds

Post to Facebook Tweet this

<link href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"> <h1 class="text-center">Checkbox/Radio - CSS Only</h1> </div> <div class="container"> <div class="well well-sm text-center"> <h3>Checkbox</h3> <div class="btn-group" data-toggle="buttons"> <label class="btn btn-success active"> <input type="checkbox" autocomplete="off" checked> <span class="glyphicon glyphicon-ok"></span> </label> <label class="btn btn-primary"> <input type="checkbox" autocomplete="off"> <span class="glyphicon glyphicon-ok"></span> </label> <label class="btn btn-info"> <input type="checkbox" autocomplete="off"> <span class="glyphicon glyphicon-ok"></span> </label> <label class="btn btn-default"> <input type="checkbox" autocomplete="off"> <span class="glyphicon glyphicon-ok"></span> </label> <label class="btn btn-warning"> <input type="checkbox" autocomplete="off"> <span class="glyphicon glyphicon-ok"></span> </label> <label class="btn btn-danger"> <input type="checkbox" autocomplete="off"> <span class="glyphicon glyphicon-ok"></span> </label> </div> </div> </div> <div class="container"> <div class="well well-sm text-center"> <h3>Radio</h3> <div class="btn-group" data-toggle="buttons"> <label class="btn btn-success active"> <input type="radio" name="options" id="option2" autocomplete="off" chacked> <span class="glyphicon glyphicon-ok"></span> </label> <label class="btn btn-primary"> <input type="radio" name="options" id="option1" autocomplete="off"> <span class="glyphicon glyphicon-ok"></span> </label> <label class="btn btn-info"> <input type="radio" name="options" id="option2" autocomplete="off"> <span class="glyphicon glyphicon-ok"></span> </label> <label class="btn btn-default"> <input type="radio" name="options" id="option2" autocomplete="off"> <span class="glyphicon glyphicon-ok"></span> </label> <label class="btn btn-warning"> <input type="radio" name="options" id="option2" autocomplete="off"> <span class="glyphicon glyphicon-ok"></span> </label> <label class="btn btn-danger"> <input type="radio" name="options" id="option2" autocomplete="off"> <span class="glyphicon glyphicon-ok"></span> </label> </div> </div> </div>
.btn span.glyphicon { opacity: 0; } .btn.active span.glyphicon { opacity: 1; }

Related: See More

Hipster As F*** Cards
Animated Radio tab
Funky Radio/Checkbox Buttons V2.0
Image Checkbox

Questions / Comments:

https://www.howkteam.com/

Pham Tan Thanh () - 7 years ago - Reply 0

It doesn't work for me, After uncheck, it goes to bg-primary class... I needo something else than bootstrap and jQuery?

Rola Aguilera Salazar () - 7 years ago - Reply 0

Hi there, thanks for the share. It looks great.

Is there a way I can have the tick be a minus before it's ticked? ie. glyphicon be glyphicon-minus until active, then go to the glyphicon-ok?

Scott Crawford () - 7 years ago - Reply 0

Hi, I added this to my form. And it all seemed to work fine, but unfortunatly it does not work completely as I want it. When clicked the glypicon does not disapear. It seems that the opacity 0 in css is not recognized in any browser. I would like to add the code but I don't think I can paste it in this field?

Mike

Mike () - 7 years ago - Reply 0

How do you show checkbox as disabled and not allow clicking on it?

Toto Kotunjo () - 8 years ago - Reply 0

hi. can i ask a question? how can i checkbox size down?

Lee Geun-Yeol (MyHealingLife) () - 8 years ago - Reply 0

since we're using bootstrap .btn classes -- .btn-sm and .btn-xs will make them smaller. example: <label class="btn btn-xs btn-success">...</label>

hellotecho () - 8 years ago - Reply 0

When I submit the form using this and I encounter some validation error, it does not repopulate the selected radio visually, how do I fix this?

John Mark Acuesta () - 8 years ago - Reply 0

Awesome perfect for my project. Thanks Man!

Josh () - 9 years ago - Reply 0

how can i use some thing from the glyphicon-s without giiting thim hide

omar sabbah () - 9 years ago - Reply 0

omar, not exactly sure, but i think you are asking how make glyphicons on the unselected items visible? -- if so, in the css, change to opacity of span.glyphicon to something that is visible. example: .btn span.glyphicon { opacity: 0.5;} then the unselected buttons will show your glyphicons slightly faded.

hellotecho () - 9 years ago - Reply 0