ラジオボタンをCSSでカスタマイズする方法

デザインを実装するときや、初期状態のラジオボタンをもっとおしゃれにしたい時など、CSSでカスタマイズしたいと思うことがあると思います。実際のコードを交えて、カスタマイズの仕方をご紹介します。

ベースとなるコード

<form action="#">
  <input
    type="radio"
    name="example"
    value="option1"
    id="radio-1"
    class="radio-input"
  />
  <label for="radio-1" class="radio-label">ラジオボタン1</label>
  <input
    type="radio"
    name="example"
    value="option2"
    id="radio-2"
    class="radio-input"
  />
  <label for="radio-2" class="radio-label">ラジオボタン2</label>
</form>

input側のid属性と、labelのfor属性を共通にすることで、labelクリックでも選択できるようにします。

ラジオボタンをカスタマイズする

1.デフォルトのラジオボタンを非表示にする

.radio-input {
  position: absolute;
  width: 0;
  height: 0;
  opacity: 0;
}

display:none;でも消せますが、キーボード操作が出来なくなったり等、見た目だけでなく、必要な機能まで消してしまいますので、上記の方法で非表示にします。

2.ラジオボタンの外側の円の部分を作る

.radio-label {
  font-size: 18px;
  font-weight: bold;
}

/*ラジオボタンの外側の円*/
.radio-label::before {
  display: inline-block;
  width: 20px;
  height: 20px;
  margin-right: 5px;
  /*位置を調整*/
  vertical-align: middle;
  content: "";
  border: 1px solid black;
  border-radius: 50%;
}

ラジオボタンの外側の円は、label要素の疑似要素で実装します。

3.選択されたときに中丸(ラジオボタンの内側に表示される小さな白い円)を作る

.radio-label {
  position: relative;
  display: inline-flex;
  align-items: center;
  font-size: 18px;
  font-weight: bold;
}

.radio-input:checked + .radio-label::after {
  position: absolute;
  top: 50%;
  left: 5px;
  display: inline-block;
  width: 10px;
  height: 10px;
  content: "";
  background-color: blue;
  border-radius: 50%;
  transform: translateY(-50%);
}

中丸が表示される位置を調整

.radio-label {
  position: relative;
  display: inline-flex;
  align-items: center;
}

後のコードで中丸の位置をposition:absouteで設定するので、そのための、基準をposition: relative;で指定。
また、 display: inline-flex;で、縦位置が中央に来るように微調整してます。

ラジオボタンが選択された時の、隣接しているradio-labelクラスの疑似要素のセレクタ

ここが少し難しい部分です。少しずつ分解すると分かりやすいです。

.radio-input:checked + .radio-label::after

ラジオボタンが選択されたとき .radio-input:checked
+（隣接セレクタ）は、選択された .radio-input のすぐ後ろにある .radio-label にスタイルを当てるために使います。さらに ::after を使うことで、ラベルの中に中丸（チェックマーク）を表示することができます。

  <input type="radio" class="radio-input"　～/>　←このラジオボタンが選択されたとき
  <label for="radio-1" class="radio-label">ラジオボタン1</label> ←この要素の疑似要素afterにスタイルをあてる

選択されたときの中丸のスタイルを定義

.radio-input:checked + .radio-label::after {
  //位置を指定
  content: "";
  position: absolute;
  top: 50%;
  left: 5px;
  transform: translateY(-50%);
  //デザインを指定
  display: inline-block;
  width: 10px;
  height: 10px;
  background-color: blue;
  border-radius: 50%;
  
}

position: absolute; top: 50%; transform: translateY(-50%); で親要素の縦位置中央を指定してます。

さらに調整を加えた最終コード

初期のラジオボタンからCSSでカスタマイズできました。このままだと不格好なので、さらに調整したものがこちらです。

<form action="#">
  <input
    type="radio"
    name="example"
    value="option1"
    id="radio-1"
    class="radio-input"
  />
  <label for="radio-1" class="radio-label">ラジオボタン1</label>
  <input
    type="radio"
    name="example"
    value="option2"
    id="radio-2"
    class="radio-input"
  />
  <label for="radio-2" class="radio-label">ラジオボタン2</label>
</form>

/* リセット用の基本スタイル（全要素に共通） */
*,
*::before,
*::after {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}

/* ラジオボタン本体は非表示にする（デザイン用に隠す） */
.radio-input {
  position: absolute;
  width: 0;
  height: 0;
  opacity: 0;
}

/* ラベル（ラジオボタンの見た目になる部分）の基本スタイル */
.radio-label {
  position: relative;
  display: inline-flex;
  align-items: center;
  font-size: 18px;
  font-weight: bold;
  color: #3f4b5e;
}

/* ラジオボタンの枠（未選択時の外側の円）を作る */
.radio-label::before {
  display: inline-block;
  width: 20px;
  height: 20px;
  margin-right: 5px;
  vertical-align: middle;
  content: "";
  border: 1px solid #c4ccd8;
  border-radius: 50%;
}

/* ラジオボタンが選択されたときの外枠（背景色あり） */
.radio-input:checked + .radio-label::before {
  background-color: #51729c;
  border: none;
}

/* ラジオボタンが選択されたときに内側の白丸を表示 */
.radio-input:checked + .radio-label::after {
  position: absolute;
  top: 50%;
  left: 5px;
  display: inline-block;
  width: 10px;
  height: 10px;
  content: "";
  background-color: #fff;
  border-radius: 50%;
  transform: translateY(-50%);
}

/* ラジオボタンが選択されたときにラベル文字の色を変更 */
.radio-input:checked + .radio-label {
  color: #51729c;
}

See the Pen ラジオボタンをカスタマイズする by keiichisawai (@sawakei) on CodePen.

選択した時に、label要素のテキストの色が変化するようにしました。
また、選択時の外側の円と中丸の色を変えることで、「選ばれたこと」がより分かりやすくなります。

トラカッパのサイト