1 行のコードで、組み込みの HTML フォーム入力にブランドカラーを取り入れることができます。
現在の HTML フォーム要素はカスタマイズが困難です。カスタム スタイルをほとんど選択しないか、まったく使用しないか、入力スタイルをリセットしてゼロから作成するかのように感じられます。ゼロから構築すると、予想以上に手間がかかります。また、要素の状態（不確定、あなたが見ています）のスタイルが失われたり、組み込みのユーザー補助機能が失われたりする可能性もあります。ブラウザが提供する機能を完全に再現するには、想定以上の作業を要する場合があります。
accent-color: hotpink;
CSS UI 仕様の CSS accent-color を使用すると、1 行の CSS で要素の色合いを調整できます。ブランドを要素に組み込む方法が提供されるため、カスタマイズの手間を省くことができます。
accent-color プロパティは color-scheme でも機能し、作成者はライト要素とダーク要素の両方の色合いを調整できます。次の例では、ユーザーがダークモードを有効にしていて、ページで color-scheme: light dark を使用し、同じ accent-color: hotpink をダークテーマのホットピンク色合いのコントロールに使用しています。
サポートされている要素
現在、accent-color プロパティを使用して色合い調整を行う要素は、checkbox、radio、range、progress の 4 つだけです。それぞれライトとダークのカラーパターンで https://accent-color.glitch.me でプレビューできます。
チェックボックス
ラジオ
範囲
Progress
コントラストを保証する
アクセスできない要素が存在するのを防ぐため、accent-color を使用するブラウザでは、カスタム アクセントとともに使用する有効なコントラスト カラーを決定する必要があります。以下のスクリーンショットは、Chrome 94（左）と Firefox 92 Nightly（右）のアルゴリズムの違いを示しています。
避けるべき最も重要なことは、ブラウザを信頼することです。ブランドカラーを提示し、それが賢明な意思決定をしてくれると信頼する。
追加: 色合い調整の強化
これら 4 つのフォーム要素以外の色合いをどうすればよいのか、疑問に思われるかもしれません。色合いを調整する最小限のサンドボックスは次のとおりです。
- フォーカス リング
- テキスト選択のハイライト
- マーカーを一覧表示する
- 矢印インジケーター（Webkit のみ）
- スクロールバーのつまみ（Firefox のみ）
html {
--brand: hotpink;
scrollbar-color: hotpink Canvas;
}
:root { accent-color: var(--brand); }
:focus-visible { outline-color: var(--brand); }
::selection { background-color: var(--brand); }
::marker { color: var(--brand); }
:is(
::-webkit-calendar-picker-indicator,
::-webkit-clear-button,
::-webkit-inner-spin-button,
::-webkit-outer-spin-button
) {
color: var(--brand);
}
将来性
この仕様では、accent-color の適用はこの記事で示した 4 つの要素に限定されていません。今後、さらにサポートが追加される可能性があります。<select> で選択された <option> などの要素は、accent-color でハイライト表示できます。
ウェブで他にどのような色付けをしたいですか？使用するセレクタを使用して @argyleink をツイートしてください。この記事に追加される可能性があります。