フォーム部品やチェックボックスなどのアクセント色を指定するプロパティです。ブラウザのデフォルトUIの色をカスタマイズでき、ブランドカラーに合わせたフォームデザインを実現できます。
accent-color: <color>| accent-pink-500 | accent-color: パレットのpink-500 |
一般形: accent-{color}-{shade}
<input type="checkbox" style="accent-color: #f59e42;" checked> オレンジ色のチェックボックスaccent-colorでフォーム部品の色を変更できます。上記はHTMLとCSSを組み合わせた例です。
input[type=checkbox]やradio、progressなどで使える。
チェックボックスやラジオの色変えにAIはappearance: noneからの完全自作を提案しがちですが、「色を変えたいだけ」ならaccent-color 1行で済みます（ネイティブのアクセシビリティを保てるのが利点）。形状まで変えたい場合に初めて自作を検討する、という段階の使い分けが重要です。
フォームのチェックボックス・ラジオ・レンジをブランドカラーにしたい。自作せずaccent-colorで済むか判断して実装して
そのままAIチャットに貼り付けて使える依頼文の例です。ページ上部の「AI用にコピー」でこのページ全体をコンテキストとして渡せます。