HTMLのチェックボックス（<input type="checkbox">）やラジオボタン（<input type="radio">）をCSSで装飾したいというのはよく聞く話です。2024年現在は、HTMLの記述は簡単なまま、CSSで自由度の高い装飾も実現できるようになっています。

1. 結論
2. 従来の手法
3. appearanceプロパティを使う手法
4. 外枠の配置
5. 未チェックとチェック済みの切り替え
6. 強制カラーモードへの対応
   1. 透明なボーダーやアウトライン
   2. 内向きの影や背景グラデーション
   3. 画像やテキスト
   4. ブラウザ組み込みの外観
7. 状態に応じたスタイルの指定
8. 参考文献

結論

単に色調を整えられればよいという場合は、accent-colorプロパティを使います。

input[type="checkbox"], input[type="radio"] {
  accent-color: #d31;
}

[画像]

Windows 11 Firefox Nightly 128.0a1での表示

accent-colorプロパティは継承するので、body要素などに指定してその子孫のフォームコントロールに一律に適用することもできます。

自由に装飾したい場合は、input要素にappearance: none[LINK]を指定したうえで、未チェック状態とチェック済み状態のスタイルを指定していきます。::before、::after疑似要素も使えます。

input[type="checkbox"] {
  -webkit-appearance: none; /* Safari 15.3以下のため */
  appearance: none;
  border: thin solid;
}
input[type="checkbox"]::before {
  content: '〓';
  visibility: hidden;
}
input[type="checkbox"]:checked::before {
  visibility: visible;
}

[画像]

Windows 11 Firefox Nightly 128.0a1での表示

従来の手法

これまでチェックボックスやラジオボタンをCSSで装飾したい場合は、input要素自身ではなくその直後に置いたspan要素やlabel要素を装飾するのが一般的でした。

<label>
  <input type="checkbox">
  <span>...</span>
</label>

<input id="the-radio-1" type="radio">
<label for="the-radio-1">...</label>