こんにちは！静岡県浜松市でWEBデザイナーをしています小瀧です。
フォームデザインの悩みって尽きませんよね。
中でも「チェックボックスやラジオボタンの色をブランドカラーに合わせたい！」というご相談は、クライアントからも頻繁にいただきます。
以前は、擬似要素やJavaScriptを使ってカスタマイズするしかなく、手間がかかる上にメンテナンス性にも課題がありました。
しかし、今はそんな苦労は必要ありません。
accent-colorというCSSプロパティを使えば、たった一行で簡単にフォーム部品の色を変えることができるんです！
この記事では、チェックボックス・ラジオボタン・進捗バーなどの色をaccent-colorでコントロールする方法を、初心者にもわかりやすく解説します。
ブラウザ対応や注意点も丁寧に解説しているので、フォームデザインでお悩みの方はぜひ参考にしてみてください。
accent-colorとは？
accent-colorは、フォーム部品の「操作できる部分」に色をつけるためのCSSプロパティです。
- チェックボックス
- ラジオボタン
- レンジスライダー
- progress要素（進捗バー）
などに使え、フォームの印象を一瞬で変えられます。
基本的な書き方
使用方法はとてもシンプルです。
input[type="checkbox"] { accent-color: #ff6600; }このように1行加えるだけで、チェックボックスのチェック色が変更されます。
実装例：チェックボックス
HTMLとCSSを組み合わせた実例です。
See the Pen
Untitled by 小瀧賢 (@ekwwawpb-the-styleful)
on CodePen.
ブランドカラーに合わせたチェックボックスが一瞬で作れます！
実装例：ラジオボタン
チェックボックス同様、ラジオボタンも簡単に色変更可能です。
See the Pen
Untitled by 小瀧賢 (@ekwwawpb-the-styleful)
on CodePen.
実装例：progress要素にも対応
進捗バーにも使用可能で、サイト全体のトーンに合わせられます。
See the Pen
Untitled by 小瀧賢 (@ekwwawpb-the-styleful)
on CodePen.
対応ブラウザ
主要ブラウザはほぼ対応しています。
- Chrome 93以降
- Firefox 92以降
- Edge 93以降
- Safari 15以降
ただし、Internet Explorerは非対応なので、業務システムなどでIE利用が前提の場合は注意しましょう。
注意点とベストプラクティス
- accent-colorはOSやブラウザによってわずかに表示が異なることがあります。
- ダークモードでは見え方が変わるため、トーンコントラストに配慮が必要です。
- フォールバック用に疑似要素や別デザインも検討しておきましょう。
まとめ
フォームのチェックボックスやラジオボタンなどを、CSS一行で直感的にカスタマイズできるaccent-colorは、Webデザインの新しいスタンダードになりつつあります。
ブランドカラーやUIトーンに一貫性を持たせたい場合には非常に便利な機能です。
IEなど一部非対応のブラウザには注意が必要ですが、今後の主流デザインには欠かせないプロパティなので、ぜひ活用してみてください!
satokotadesignキャンペーン実施中！
