Skip to content

Instantly share code, notes, and snippets.

@raecoo
Forked from tagliala/btn-group-radio.css
Last active August 29, 2015 14:06
Show Gist options
  • Save raecoo/1f49c552f23a5d0f3db2 to your computer and use it in GitHub Desktop.
Save raecoo/1f49c552f23a5d0f3db2 to your computer and use it in GitHub Desktop.
.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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment