フォーム要素のスタイルをカスタマイズしたい場合があるでしょう。
特にチェックボックスやラジオボタンの色は、従来ブラウザによって決められており、自由に変更するのが難しいものでした。
そんな悩みを解決するCSSプロパティが、accent-colorです。
この記事では、その基本的な使い方から、注意点まで詳しく解説します。
目次
accent-colorとは？
accent-colorは、フォーム部品のアクセントカラーを変更できるCSSプロパティです。
対象となるのは、以下のような要素です：
<input type="checkbox"><input type="radio"><progress><range>（スライダー）
これらのデフォルトデザインの一部を、CSSでコントロール可能にしてくれます。
基本的な使い方
以下のように、CSSで accent-color を指定するだけで、チェックボックスやラジオボタンの色を変更できます。
<label><input type="checkbox" checked> 同意する</label>
<label><input type="radio" name="gender" checked> 男性</label>
<label><input type="radio" name="gender"> 女性</label>
input[type="checkbox"],
input[type="radio"] {
accent-color: #ff0000; /* レッド */
}
このように、簡単にチェックボックスやラジオボタンの色を変更できます。
サポート状況
accent-color は、主要なモダンブラウザで広くサポートされています：
- Chrome
- Edge
- Firefox
- Safari
- モバイルブラウザ（iOS / Android）も対応済み
ただし、IEでは非対応です。古いブラウザへの対応が必要な場合は注意しましょう。
サポート状況については Can I useでご確認ください。
可読性に関する注意点
accent-colorは主要ブラウザではサポートされていますが、可読性についてはブラウザによってサポート状況が異なります。
例えば、accent-colorをwhiteにした場合、Google Chrome、Edge、Firefoxでは自動的にチェックの色が黒になりますが、SafariやAndroidのChromeでは黒になりません。
Safariなどでaccent-colorを白に近い色にすると可読性が低下するので、そのような色を使わないようにしましょう。
気になる場合はiPhoneなどで実際の表示をチェックしてみてください。
可読性に関するサポート状況についても Can I useでご確認ください。
カスタマイズの注意点
accent-colorは、フォーム部品全体を自由にデザインできるわけではありません。- 例えば形状や大きさは、ユーザーエージェントスタイルの影響が強く、完全なコントロールは難しいです。
- 配色を変更する目的で使い、必要に応じて他のカスタムスタイルと組み合わせましょう。
- 白に近い明るい色を使うとブラウザによっては可読性が低下する
まとめ
accent-color を使うことで、フォーム部品のデザイン自由度が大きく広がります。デザイナーが思い通りのUIを実現しやすくなり、ブランドカラーとの統一感も取りやすくなる点が魅力です。
対応ブラウザに注意しつつ、ぜひ取り入れてみてください。