accent-color

Baseline 2022

Newly available

Since March 2022, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

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

試してみましょう

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

ブラウザーの互換性

BCD tables only load in the browser