accent-color でチェックボックス・ラジオ・レンジをブランド色にする
accent-color を1行書くだけで、ブラウザ標準のチェックボックスやラジオボタン、レンジスライダー、プログレスバーの色をまとめて変えられる。
どんな時に使う？
- フォーム部品の色だけブランドカラーに合わせたいが、
appearance: noneで一から作り直したり、input を隠して疑似要素で描き直したりはしたくないとき。 - ネイティブ部品のままなので、キーボード操作やスクリーンリーダーの対応がそのまま残る。
コード
css
:root {
accent-color: #ea580c;
}
/* 部品ごとに変えたい場合 */
input[type="range"] {
accent-color: oklch(65% 0.2 250);
}- 対象はチェックボックス、ラジオボタン、
input[type="range"]、<progress>。 - チェックマークの色はブラウザが背景色とのコントラストを見て自動で白か黒を選ぶので、明るいアクセント色でも読みやすい。
- 継承されるプロパティなので、
:rootに書けばページ全体に効く。
注意点・対応状況
- 全主要ブラウザで対応済み（2022 年以降）。
- 変えられるのは「アクセント部分の色」だけで、サイズや形、枠線までは変えられない。形まで変えたい場合は
appearance: noneで自作する。 - ダークモードでの部品の明暗は
color-schemeが担当する。合わせて ダークテーマでは color-scheme も指定してフォーム部品・スクロールバーを暗くする を参照。