Jul. 30th,2022
プロパティについて
＃
概要
“accent-color”プロパティはフォーム部品などのユーザー・エージェントによって生成されるコントロール・インターフェースに使用される強調表示色を指定するプロパティです。
ユーザー・エージェントによって生成されるコントロール・インターフェースは一般的に統一されたデザインになっていますが、多くのユーザー・エージェントではそのデザインに強調表示色を使用します。すべてのユーザー・エージェントが強調表示色を使用するわけではありませんが、多くの場合選択されたチェックボックスやラジオボタンなどを強調表示するために使用されます。
“accent-color”プロパティで指定された強調表示色は主に以下の要素に使用されます。
- 選択されたチェックボックス(“type="checkbox"”を指定した“input”要素)
- 選択されたラジオボタン(“type="radio"”を指定した“input”要素)
- レンジスライダー(“type="range"”を指定した“input”要素)
- プログレスバー(“progress”要素)
サンプルコード
input { accent-color: rgb(204,153,204);}
＃
値
| 値 | 説明 |
|---|---|
| auto | ユーザー・エージェントが選択した色を強調表示色として使用する (OSやデバイスの強調表示色がある場合はその色を使用します。) |
| <color> | “rgb()”関数や16進数カラーコード、カラーネームなどで強調表示色を指定 |
| 共通キーワード |
ユーザー・エージェントは指定された可読性を確保するため、強調表示色として指定された色によっては強調表示色が使用される部分以外の色を調整することがあります。
また、ユーザー・エージェントによっては指定された強調表示色をグラデーションにするなどして調整して使用する場合があります。
＃
使用例
＃
＃
