CSS accent-color 属性

定義と使用法

accent-color 属性は、ユーザーインターフェースコントロールの強調色を指定するために使用されます。例えば：

<input type="checkbox">
<input type="radio">
<input type="range">
<progress>

例

異なるユーザーインターフェースコントロールに強調色を設定します：

input[type=checkbox] {
  accent-color: red;
}
input[type=radio] {
  accent-color: green;
}
input[type=range] {
  accent-color: rgb(0, 0, 255);
}
progress {
  accent-color: hsl(39, 100%, 50%);
}

自分で試してみてください

CSS文法

accent-color: auto|color|initial|inherit;

属性値

値 説明
auto デフォルト値。ブラウザが強調色を選択します。
color

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

すべての合法な色値（rgb、16進数、名前付き色など）を使用できます。

合法な値の詳細については、私たちのCSSカラーのチュートリアルを参照してください。
initial この属性をデフォルト値に設定します。参照してください initial。
inherit 親要素からこの属性を継承します。参照してください inherit。

技術的詳細

デフォルト値： auto
継承性： は
アニメーション作成： サポート。参照してください：アニメーション関連属性。
バージョン： CSS4
JavaScript文法： object.style.accentColor="red"

ブラウザのサポート

テーブルの数字は、その属性を完全にサポートする最初のブラウザのバージョンを示しています。

Chrome Edge Firefox Safari オペラ
93.0 93.0 92.0 15.4 79.0