cssでラジオボタンをiOSのようなトグルボタンにする

cssでトグルボタン

jqueryなどのjavascriptのフレームワークを使わずに、cssだけでラジオボタンをiPhoneのようなトグルボタンのデザインで表示します。

サンプルソース

サンプルソースコードはこちら。

<style>
input[type="radio"] {
  display: none;
}
.toggle-radio {
  padding-top: 20px;
  text-align: center;
}
#button-1:checked ~ .toggle-radio label[for='button-1'], #button-2:checked ~ .toggle-radio label[for='button-2'] {
  background: #00a0ca;
  color: #fff;
}
.toggle-radio label:first-of-type {
  border-left: 1px solid;
  border-top-left-radius: 7px;
  border-bottom-left-radius: 7px;
}
.toggle-radio label:last-of-type {
  border-top-right-radius: 7px;
  border-bottom-right-radius: 7px;
}
.button label {
  width: 30%;
}
.toggle-radio label {
  display: inline-block;
  padding: 10px 0 10px;
  border-top: 1px solid #00a0ca;
  border-right: 1px solid #00a0ca;
  border-bottom: 1px solid #00a0ca;
  text-align: center;
  box-shadow: inset 1px 0 0 #00a0ca;
  cursor: pointer;
  color: #00a0ca;
}
</style>

  <input type="radio" name="button" id="button-1" checked="">
  <input type="radio" name="button" id="button-2">
  <div class="toggle-radio button">
    <label for="button-1" onclick="">ひだり</label><label for="button-2" onclick="">みぎ</label>
  </div>