CSSでラジオボタンとチェックボックスをデザインする

チェックボックスやラジオボタンをデザインする方法の1つをご紹介。

チェックボックスをデザイン

1. <input type="checkbox">自体を非表示にします。
2. 非表示にしてもチェック出来るようにする為、<input type="checkbox">を<label>タグで囲います。
3. チェックボックスを表示させる為、<input type="checkbox">の後ろに<span>要素を入れます。
4. チェックボックスが、チェックされてる時、されてな時に応じて<span>のbefore擬似要素に対して、任意のスタイルを指定してあげます。

html

<label>
  <input type="checkbox" class="checkbox" />
  <span class="checkbox-icon"></span>
  チェックボックス
</label>

css

.checkbox {
  display: none;
}
.checkbox + .checkbox-icon {
  position: relative;
  vertical-align: middle;
}
.checkbox + .checkbox-icon:before {
  content: "\f372";
  font-family: "Ionicons";
  color: #ccc;
  font-size: 22px;
}
.checkbox:checked + .checkbox-icon:before {
  content: "\f374";
  color: #17bcdf;
}

ラジオボタンをデザイン

上記と同じ方法でラジオボタンもデザインできます。

html

<label>
  <input type="radio" name="radio" class="radio" />
  <span class="radio-icon"></span>
  ラジオボタン1
</label>    
<label>
  <input type="radio" name="radio" class="radio" />
  <span class="radio-icon"></span>
  ラジオボタン2
</label>  

css

.radio {
  display: none;
}
.radio + .radio-icon:before {
  content: "\f3a6";
  font-family: "Ionicons";
  color: #ccc;
  font-size: 22px;
}
.radio:checked + .radio-icon:before {
  content: "\f3a7";
  color: #17bcdf;
}