チェックボックスをCSSでカスタマイズするためのDOM構造

投稿日：2025/01/10 更新日：2025/02/17

初めに

チェックボックスをカスタマイズする際に、既存のチェックボックスをdisplay: none;で消すことはアクセシビリティの関係上推奨されません。
そのため、opacity: 0;にしつつ、タグをネストしていって実装するというのが主流かと思います。
ただそのタグ、使用頻度が高い割にどう書いていたか忘れてしまうので、コピペできるようにまとめます。

サンプルコード

HTML

<div class="form-sample">
  <input type="checkbox" name="test" id="test-a">
  <label for="test-a">
    <span class="form-sample-inner">
      <span class="form-sample-box-wrap">
        <span class="form-sample-box"></span>
      </span>
      <span class="form-sample-txt">チェックボックス-a</span>
    </span>
  </label>
</div>
<div class="form-sample">
  <input type="checkbox" name="test" id="test-b">
  <label for="test-b">
    <span class="form-sample-inner">
      <span class="form-sample-box-wrap">
        <span class="form-sample-box"></span>
      </span>
      <span class="form-sample-txt">チェックボックス-b</span>
    </span>
  </label>
</div>

SCSS

.form-sample {
  input {
    position: absolute;
    width: 0;
    height: 0;
    opacity: 0;
    &:checked {
      & + label {
        border-color: #222; // #枠線
        .form-sample-box::after {
          opacity: 1;
        }
      }
    }
  }
  label {
    display: block;
    border: solid 2px transparent; // #枠線
    border-radius: 4px; // #枠線
    padding: 4px 8px; // #枠線
    &:hover {
      cursor: pointer;
      opacity: .7;
    }
  }
  &-inner {
    position: relative;
    display: block;
  }
  &-txt {
    padding-left: 24px; // #四角（余白）
    display: inline-block;
  }
  &-box {
    position: relative;
    display: block;
    width: 16px; // #四角（サイズ）
    height: 16px; // #四角（サイズ）
    &-wrap {
      position: absolute;
      top: 2px; // #四角（位置）
      left: 0; // #四角（位置）
    }
    &::before {
      content: "";
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      display: block;
      width: 100%;
      height: 100%;
      border: solid 2px #ddd; // #四角
    }
    &::after {
      content: "";
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      display: inline-block;
      width: calc(100% - 4px); // #チェック（サイズ）
      height: calc(100% - 4px); // #チェック（サイズ）
      opacity: 0;
      background-color: #222; // #チェック
      clip-path: polygon(25% 75%, 100% 0, 100% 25%, 25% 100%, 0 81%, 0 55%); // #チェック
    }
  }
}

解説

元のチェックボックスは邪魔にならないように透過させてposition: absolute;で浮かせています。
labelにposition: relative;を書こうと思ったのですが、まれにあるチェックが付いたら選択範囲が線で囲われるパターンを思い出し、その想定で作成しています。

ボーダーのデザインを変える

labelと:checkedに枠線に関する記述を入れています。
コメントアウトで「#枠線」と入っている個所になります。
ちなみに、borderにtransparentを入れているのは、選択時にボーダー分の高さが出てかくつかないようにするのに初めから幅を確保しているためです。

四角部分のデザインを変える

疑似要素の::beforeで作成しています。
コメントアウトで「#四角」と入っている個所になります。
作成は::beforeで行っていますが、余白や幅などは::before以外でも記述しています。

チェックアイコンのデザインを変える

疑似要素の::afterで作成しています。
コメントアウトで「#チェック」と入っている個所になります。
clip-pathでチェックマークを作成しています。svgだと画像が抜けてしまう可能性があるので、どこにコピペしても表示は確認できるようにしようという意図でそのようにしています。

以上になります。
これでちょっと時短になって筆者はハッピーです！