フォームのラジオボタンをカスタマイズ

ラジオボタンのカスタマイズの仕方をいつも忘れてしまうので、自分用にメモ。

HTML

<label>
	<input type="radio" name="性別" value="男性" class="bl_gender">
	<span>男性</span>
</label>

男性、女性で選択できるラジをボタンを想定。

CSS

.bl_gender {
  display: none; /* 初期のラジオボタンを非表示 */
}
.bl_gender + span { /* .bl_genderの次のspan */
  position: relative;
  padding-left: 40px;
}
.bl_gender + span::before { /* ラジオボタンを作成（外側） */
  content: "";
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 1px solid #969696;
  background: #fff;
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
}
.bl_gender + span::after { /* ラジオボタンを作成（内側） */
  content: "";
  width: 12px;
  height: 12px;
  background: #006688;
  border-radius: 50%;
  position: absolute;
  top: 50%;
  left: 6px;
  transform: translateY(-50%);
  opacity: 0; /* 基本は非表示 */
}
.bl_gender:checked + span::after { /* 選択されたボタンだけ表示 */
  opacity: 1;
}

↓ こんな感じになります。

bl_genderというクラス名をつけてますが、input[type="radio"]でもいけるとおもいます、たぶん！