eureka

チェックボックスの背景色はaccent-colorで変える

5

久々の投稿はCSSだよ

チェックボックスを特にカスタマイズしたいわけではないけど、チェックボックスのチェック時の色だけ変えたい・・・。そんな場面に陥ったことはないでしょうか。
私がそうだったのでメモります。

accent-colorプロパティを使いましょう!これだけ!!終了!!

input[type="checkbox"] {
  accent-color: red;
}

accent-colorはMDNによるとチェックボックス以外にもラジオボタンやレンジ、プログレスバーなどの他のinput要素でも効くみたいです。
accent-color – MDN

<input type="checkbox">
<input type="radio">
<input type="range">
<progress>

チェック時の色はブラウザ設定に依存しているようで、人によって色が異なっているみたいですね。
とはいえ、デザインに色を合わせるためにわざわざデフォルトの表示を削除してlabel要素で新しく作ったりして・・・なんてできればしたくないので、色を変えるだけならこれで済ませたいところ!

お疲れ様でした。

5