accent-color
Limited availability
This feature is not Baseline because it does not work in some of the most widely-used browsers.
試してみましょう
現在 accent-color
に対応しているブラウザーは、以下の HTML 要素に適用します。
各ユーザーエージェントには、読みやすさとコントラストを確実に保持するためのバリエーションを持つアクセントカラーがあります。そのアクセントカラーはすべてのユーザーインターフェイスコントロールで使用されるわけではなく、コントロールのすべての状態で使用されるわけでもありません。 accent-color
は、それが適用される状態でアクセントカラーを使用するユーザーインターフェイスコントロールにのみ適用されます。
構文
css
/* キーワード値 */
accent-color: auto;
/* <color> 値 */
accent-color: darkred;
accent-color: #5729e9;
accent-color: rgb(0 200 0);
accent-color: hsl(228 4% 24%);
/* グローバル値 */
accent-color: inherit;
accent-color: initial;
accent-color: revert;
accent-color: revert-layer;
accent-color: unset;
値
公式定義
初期値 | auto |
---|---|
適用対象 | すべての要素 |
継承 | あり |
計算値 | auto は仕様通りに計算され、 <color> 値は color プロパティで定義されたように計算される。 |
アニメーションの種類 | 計算値の型による |
形式文法
例
独自の強調色を設定
HTML
html
<input type="checkbox" checked />
<input type="checkbox" class="custom" checked />
CSS
css
input {
accent-color: auto;
display: block;
width: 30px;
height: 30px;
}
input.custom {
accent-color: rebeccapurple;
}
結果
仕様書
Specification |
---|
CSS Basic User Interface Module Level 4 # widget-accent |
ブラウザーの互換性
BCD tables only load in the browser
関連情報
background-color
,border-color
,caret-color
,color
,column-rule-color
,outline-color
,text-decoration-color
,text-emphasis-color
,text-shadow
: その他の色に関するプロパティ<color>
データ型<input>
要素- CSS を使った HTML の要素への色の適用