Pure CSS3 Bootstrap Radio Buttons

btn-group-radio.css

.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;
}

test.html

<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>

http://jsfiddle.net/rDHkX/5/

• Margin fix

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

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

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