Skip to content

Instantly share code, notes, and snippets.

@tagliala
Last active October 11, 2017 09:00
Show Gist options
  • Save tagliala/3806454 to your computer and use it in GitHub Desktop.
Save tagliala/3806454 to your computer and use it in GitHub Desktop.
Pure CSS3 Bootstrap Radio Buttons
.btn-group-radio input[type=radio] {
visibility: hidden;
position: absolute !important;
top: -9999px !important;
left: -9999px !important;
}
.btn-group-radio input[type=radio]:checked + .btn {
color: #333333;
background-color: #e6e6e6;
*background-color: #d9d9d9;
background-color: #cccccc \9;
background-color: #e6e6e6;
background-color: #d9d9d9 \9;
background-image: none;
outline: 0;
-webkit-box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05);
-moz-box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05);
box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05);
}
.btn-group-radio > input:first-child + .btn {
margin-left: 0;
-webkit-border-top-left-radius: 4px;
-moz-border-radius-topleft: 4px;
border-top-left-radius: 4px;
-webkit-border-bottom-left-radius: 4px;
-moz-border-radius-bottomleft: 4px;
border-bottom-left-radius: 4px;
}
.btn-group-radio > input:first-child + .btn.large {
margin-left: 0;
-webkit-border-top-left-radius: 6px;
-moz-border-radius-topleft: 6px;
border-top-left-radius: 6px;
-webkit-border-bottom-left-radius: 6px;
-moz-border-radius-bottomleft: 6px;
border-bottom-left-radius: 6px;
}
.btn-group-radio > .btn {
margin-left: -1px;
}
<div class="btn-group btn-group-radio">
<input type="radio" name="optionsRadios" id="optionsRadios1" value="option1">
<label class="btn" for="optionsRadios1">
Option one
</label>
<input type="radio" name="optionsRadios" id="optionsRadios2" value="option2">
<label class="btn" for="optionsRadios2">
Option two
</label>
<input type="radio" name="optionsRadios" id="optionsRadios3" value="option3">
<label class="btn" for="optionsRadios3">
Option three
</label>
</div>
@HassanKrayem
Copy link

I have tried http://jsfiddle.net/rDHkX/ and found some problems in firefox v56 the button checked style isn't toggling

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment