TL;DR

HTML のチェックボックスを画像を使って表示し、かつキーボード操作ができるように実装した

モチベーション

チェックボックスのチェックマークを画像で実装したい（CSS なんもわからん！）。
けど、 input 要素を display: none; するとキーボード操作できなくて悲しい。

なので、画像を使ってチェックマークをキーボード操作もできるようなチェックボックスが作りたい。

成果

頑張った成果がここに反映される（予定）

かし 2022/09/14に更新

サンプル1
HTML だけの実装

特徴

キーボードで操作できる
表示はデフォルトのもの

<label for="checkbox1">
  <input type="checkbox" id="checkbox1">ピカチュウ
</label>
<label for="checkbox2">
  <input type="checkbox" id="checkbox2">フシギダネ
</label>
<label for="checkbox3">
  <input type="checkbox" id="checkbox3">ヒトカゲ
</label>
<label for="checkbox4">
  <input type="checkbox" id="checkbox4">ゼニガメ
</label>

かし 2022/09/15に更新

サンプル2
input 要素を display: none して画像を使ってる実装

特徴

好きな画像が使える
キーボードで操作できない

参考：https://s-cross.net/blog/css-checkbox/

<label for="checkbox1" class="checkbox">
  <input type="checkbox" id="checkbox2-1">
  <span class="text">ピカチュウ</span>
</label>
<label for="checkbox2" class="checkbox">
  <input type="checkbox" id="checkbox2">
  <span class="text">フシギダネ</span>
</label>
<label for="checkbox3" class="checkbox">
  <input type="checkbox" id="checkbox3">
  <span class="text">ヒトカゲ</span>
</label>
<label for="checkbox4" class="checkbox">
  <input type="checkbox" id="checkbox4">
  <span class="text">ゼニガメ</span>
</label>

.checkbox input {
  display: none;
}

.checkbox input + .text:before {
  content: "";
  display: inline-block;
  width: 20px;
  height: 20px;
  margin-right: 8px;
  vertical-align: middle;
  background-size: auto, 100%;
  background-repeat: no-repeat, no-repeat;
  background-image: none, url("https://seekicon.com/free-icon-download/checkbox-unchecked_1.svg");
}

.checkbox input:checked + .text:before {
  background-image: none, url("https://seekicon.com/free-icon-download/checkbox_4.svg");
}

かし 2022/09/14

サンプル3
input 要素を width: 0; で見えないようにした実装

特徴

キーボードで操作できる
操作対象がどれかわからない

.checkbox input {
  width: 0;
  margin: 0;
}

かし 2022/09/14に更新

サンプル4
input がフォーカスされたときに outline を表示するように実装。

:focus を使うとマウス操作でも outline が表示されるのに対して、 :focus-visible だとキーボード操作でフォーカスされたときだけ outline が表示される。

キーボードで操作ができて、操作対象も明確になったので満足した。

.checkbox input:focus-visible + .text:before {
  outline: auto;
  outline-offset: 2px;
  outline-color: blue;
}

かし 2022/09/14

まとめ

input は見えないようにするが display: none; にはしない
画像の表示は :checked の疑似要素を使う
type="checkbox"において、キーボード操作時のみのフォーカスのときは :focus-visible の議事要素を使う

画像を使った見た目の作りやすさとアクセシビリティの両方を取れる良い実装になった。

このスクラップは2022/09/14にクローズされました