1. ラジオボタン・チェックボックスで覚えておきたいこと

書き方

id 属性と for 属性の値を同じにして input タグと label タグを関連づける書き方

<!-- ラジオボタン -->
<input type="radio" id="xxx" name="" />
<label for="xxx">radio_button</label>

<!-- チェックボックス -->
<input type="checkbox" id="xxx" name="" />
<label for="xxx">checkbox</label>

label タグで input タグを内包する書き方

<!-- ラジオボタン -->
<label>
  <input type="radio" name="" />
  <span>radio_button</span>
</label>

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

name 属性でグループ化

name 属性の値を一緒にすることでグループ化することができます。下記は性別（gender）のグループでまとめたラジオボタンになります。name 属性でのグループ化はチェックボックスのときも同様です。

<label>
  <input type="radio" name="gender" />
  <span>男性</span>
</label>
<label>
  <input type="radio" name="gender" />
  <span>女性</span>
</label>
<label>
  <input type="radio" name="gender" />
  <span>どちらでもない</span>
</label>

ラジオボタンとチェックボックスの違い

ラジオボタンでグループを作成した場合、グループの中から一つの項目しか選択できませんが、チェックボックスの場合は複数の項目を選択することができます。またチェックボックスは単体で使用した場合、on/off ができますが、ラジオボタンは単体で使用すると on はできますが、off ができません。

checked 属性、disabled 属性、required 属性

checked - はじめから選択された状態にする。ラジオボタンの場合、グループで一つ、チェックボックスの場合、複数可。
disabled - 選択ができない状態にする。
required - 選択を必須項目にする。ラジオボタンの場合、グループで一つ、チェックボックスの場合、複数可。

<!-- 選択された状態 -->
<input type="radio" name="xxx" checked />

<!-- 選択できない状態 -->
<input type="radio" name="xxx" disabled />

<!-- 選択が必須 -->
<input type="radio" name="xxx" required />
<input type="radio" name="xxx" />

2. ラジオボタン・チェックボックスのカスタマイズ

ラジオボタンもチェックボックスもデフォルトだとブラウザによって見え方が違います。どのブラウザで見ても同様の見え方にしたいときに CSS でカスタマイズをします。

デモ

ラジオボタンのカスタマイズ手順

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

<label>
  <input type="radio" name="" class="radio_input" value="" />
  <span class="radio_text">ラジオボタン</span>
</label>

.radio_input {
  display: none;
}

2. オフ状態のラジオボタンを表示

.radio_text {
  position: relative;
  margin-left: 20px;
}
.radio_text::before {
  content: "";
  display: block;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  border: solid 1px #0066ff;
  position: absolute;
  top: 2px;
  left: -20px;
}

3. ラジオボタンが選択されたら、オン状態のラジオボタンを表示

.radio_input:checked + .radio_text::after {
  content: "";
  display: block;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #0066ff;
  position: absolute;
  top: calc(2px + 3px);
  left: calc(-20px + 3px);
}

チェックボックスのカスタマイズ手順

1. デフォルトのチェックボックスを非表示

<label>
  <input type="checkbox" name="" class="checkbox_input" value="" />
  <span class="checkbox_text">チェックボックス</span>
</label>

.checkbox_input {
  display: none;
}

2. オフ状態のチェックボックスを表示

.checkbox_text {
  position: relative;
  margin-left: 20px;
}
.checkbox_text::before {
  content: "";
  display: block;
  width: 11px;
  height: 11px;
  border-radius: 2.5px;
  border: solid 1px #0066ff;
  position: absolute;
  top: 2px;
  left: -20px;
}

3. チェックボックスが選択されたら、チェックマークを表示

.checkbox_input:checked + .checkbox_text::before {
  background: #0066ff;
}

.checkbox_input:checked + .checkbox_text::after {
  content: "";
  display: block;
  width: 3px;
  height: 7px;
  border-right: 2px solid #fff;
  border-bottom: 2px solid #fff;
  transform: rotate(40deg);
  position: absolute;
  top: calc(2px + 1px);
  left: calc(-20px + 4px);
}