フォーム部品のブランド色は accent-color の1行で揃える
チェックボックスやラジオボタンのアクセント色を、独自アイコン画像なしでブランドカラーに合わせる。
どんな問題を解決するか / いつ使うか
ネイティブのチェック／ラジオ／range などがブラウザ標準色のままで、ブランドとずれるとき。カスタムアイコンで無理に差し替えていた箇所を簡略化したいとき。
やり方
- ルートまたはフォーム付近でブランド色を指定する:
css
:root {
accent-color: #2563eb; /* ブランドのメイン色 */
}- 必要ならコンポーネント単位で上書きする（例:
.filter-panel { accent-color: var(--brand); }）。 - 実機・主要ブラウザでチェック／ラジオ／progress 等の見え方を確認する。
注意点・対応状況
- 対応ブラウザと部品の種類は MDN の
accent-colorを確認する。古いブラウザでは効かない。 - ダークモードや強制カラーでは見え方が変わる。コントラストも別途確認する。
- 完全に独自見た目が必要なUIでは、引き続きカスタムコンポーネントが必要な場合がある。
出典
- 投稿者: @wokobo_net
- 投稿: @wokobo_net · 2026-10-11
- 収集日: 2026-10-12（JST）