accent-color

Limited availability

This feature is not Baseline because it does not work in some of the most widely-used browsers.

accent-colorCSS のプロパティで、一部の要素で生成されるユーザーインターフェイス要素の強調表示色を設定します。

試してみましょう

現在 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

UA が選択した色を表します。プラットフォームの強調色がある場合は、それと一致します。

<color>

強調色として使用される色を指定します。

公式定義

初期値auto
適用対象すべての要素
継承あり
計算値auto は仕様通りに計算され、 <color> 値は color プロパティで定義されたように計算される。
アニメーションの種類計算値の型による

形式文法

accent-color = 
auto |
<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

ブラウザーの互換性

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
accent-color
auto

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
Partial support
Partial support

関連情報