チェックボックスの色をCSSで変更する

2022/12/06

<input type="checkbox">でチェックボックスをそのまま表示すると、ブラウザのデフォルト状態で表示され、たいていの場合、青いチェックボックス（←こんな感じ）で表示されます。

しかし、accent-colorプロパティで色を指定すれば、簡単にチェックボックスがチェックされた時の色を変更することができるんです！

accent-colorプロパティの使い方

チェックボックスの色の変更方法はとっても簡単で、以下のように設定するだけでチェック時の色が変えられます！

.checkbox {
  accent-color: #f00;
}

inputタグに直接スタイルを指定する場合は、以下のようにすると

<input type="checkbox" style="accent-color: #f00;" checked>

↓こんな感じで色が変えられます！

↓Chromeでは薄い色を指定した場合はチェックマークが黒になりました！
他のブラウザは未確認ですｗ

チェックマークの色はいつ変わるのか？

設定する色によって、チェックマークの色が白だったり黒だったりしたので、試しに確認してみようと思います！
おそらく明度によって変わる気がするので、シンプルにモノトーンで確認をしてみたいと思います！
※確認しているブラウザはWindowsのChromeなので、OSやブラウザによって表示が変わるかと思いますので、いろんなブラウザでこの記事を見てみてください！

#000
#111
#222
#333
#444
#555
#666
#777
#888←ここまでチェックマーク白
#999←ここからチェックマーク黒
#aaa
#bbb
#ccc
#ddd
#eee
#fff

検証した結果、#888と#999が境目でした！

WindowsのChromeで表示したときのスクショ画像は↓こちらです！

iOSのsafariで表示した場合

記事をスマホで表示したところ、accent-colorが効いていませんでした…

appearance: none;と-webkit-appearance: none;も追記してみましたが、チェックマークが消えてしまい、なかなか思うようなチェックボックスのデザインになりませんでした…

調べてみると、スマホブラウザではaccent-colorが効かないようなので（iOSのみだけ？）疑似要素を使ってチェックマークを作ってやるみたいです！

角丸なしのチェックマークのチェックボックス

疑似要素beforeのみでチェックマーク作ります！

HTML

<input class="cb_red" type="checkbox" checked>

CSS

input.cb_red[type="checkbox"] {
  position: relative;
  height: 40px;
  width: 40px;
  display: inline-block;
  border-radius: 8px;
  border: 2px solid #ccc;
  background: #fff;
  -webkit-appearance: none;
  appearance: none;
}
input.cb_red[type="checkbox"]:checked {
  border: none;
  background: #f00;
}
input.cb_red[type="checkbox"]:checked::before {
  display: block;
  content: '';
  position: absolute;
  top: 4px;
  left: 13px;
  width: 10px;
  height: 20px;
  border-right: 4px solid #fff;
  border-bottom: 4px solid #fff;
  transform: rotate(45deg);
}

角丸ありのチェックマークのチェックボックス

疑似要素beforeとafterでチェックマーク作ります！

HTML

<input class="cb_green" type="checkbox" checked>

CSS

input.cb_green[type="checkbox"] {
  position: relative;
  height: 40px;
  width: 40px;
  display: inline-block;
  border-radius: 8px;
  border: 2px solid #ccc;
  background: #fff;
  -webkit-appearance: none;
  appearance: none;
}
input.cb_green[type="checkbox"]:checked {
  border: none;
  background: #090;
}
input.cb_green[type="checkbox"]:checked::before,
input.cb_green[type="checkbox"]:checked::after {
  display: block;
  content: '';
  position: absolute;
  border-radius: 2px;
  transform: rotate(45deg);
  background: #fff;
}
input.cb_green[type="checkbox"]:checked::before {
  bottom: 15px;
  left: 6px;
  width: 14px;
  height: 4px;
}
input.cb_green[type="checkbox"]:checked::after {
  bottom: 9px;
  left: 22px;
  width: 4px;
  height: 24px;
}