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>
@tagliala
Copy link
Author

tagliala commented Oct 1, 2012

@tagliala
Copy link
Author

http://jsfiddle.net/rDHkX/6/

  • Fixed an issue causing page to scroll to top with firefox and opera (maybe others)

@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