このウェブサイトはご利用の端末での閲覧に対応していません。
This website does not support your device.

accent-color”プロパティ:強調表示色CSS3で追加

記事Jul. 30th,2022
フォーム部品などに使用される強調表示色を指定するプロパティ
この記事はCSS3に対応しています。
この記事はCSS3に対応しています。

プロパティについて

概要

初期値 accent-color: auto;
適用対象 すべての要素
継承 Yes
パーセント値 パーセント値は指定できません
計算値 auto”もしくは算出された色
アニメーション 計算値

accent-color”プロパティはフォーム部品などのユーザー・エージェントによって生成されるコントロール・インターフェースに使用される強調表示色を指定するプロパティです。

ユーザー・エージェントによって生成されるコントロール・インターフェースは一般的に統一されたデザインになっていますが、多くのユーザー・エージェントではそのデザインに強調表示色を使用します。すべてのユーザー・エージェントが強調表示色を使用するわけではありませんが、多くの場合選択されたチェックボックスやラジオボタンなどを強調表示するために使用されます。

強調表示色の例

accent-color”プロパティで指定された強調表示色は主に以下の要素に使用されます。

サンプルコード

input { accent-color: rgb(204,153,204);}

説明
auto ユーザー・エージェントが選択した色を強調表示色として使用する (OSやデバイスの強調表示色がある場合はその色を使用します。)
<color> rgb()”関数16進数カラーコードカラーネームなどで強調表示色を指定
共通キーワード

ユーザー・エージェントは指定された可読性を確保するため、強調表示色として指定された色によっては強調表示色が使用される部分以外の色を調整することがあります。

強調表示色の例

また、ユーザー・エージェントによっては指定された強調表示色をグラデーションにするなどして調整して使用する場合があります。

仕様書

定義されている仕様書
Level 1 Level 2 Level 3 Level 4
勧告(REC) 勧告(REC) 勧告(REC) 作業草稿(WD)
accent-color
定義なし

定義なし

定義なし

定義あり
Level 1 Level 2 Level 3 Level 4
勧告(REC) 勧告(REC) 勧告(REC) 作業草稿(WD)
auto
定義なし

定義なし

定義なし

定義あり
<color>
定義なし

定義なし

定義なし

定義あり

使用例

UAが選択した色を使用する

input {
accent-color: auto;
}
あなたの猫の色

あなたの猫の模様

あなたの情報

*このフォームは送信できません。

強調表示色を指定する

input {
accent-color: rgb(204,153,204);
}
あなたの猫の色

あなたの猫の模様

あなたの情報

*このフォームは送信できません。
一番上へ
トップにもどる
シェアする
シェアする
Facebookでシェアする
ツイート
Google+でシェア
Pocket
はてなブックマーク