accent-colorユーザーインターフェイス要素のアクセントカラーを設定する

accent-color プロパティは、チェックボックスやラジオボタンといった一部ユーザーインターフェイス要素のアクセントカラー (選択されたりした際の強調色) を設定します。

対象となるユーザーインターフェイス要素は、下記の通りです。

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

accent-color プロパティに指定できる値

意味
auto ユーザエージェント指定の色が使用されます (初期値)。
<color> 任意の色を指定します。使用できる値は <color> データ型で定義された色、例えば キーワード (red など)、カラーコード (#000000 など) をはじめ、rgb()rgba()、あるいは hsl()hsla() などです。

例えば、accent-color: red; を指定したチェックボックスは、対応ブラウザにおいて、チェックした際に 「赤」 がアクセントカラーとして使用されます。

accent-colorの仕様

初期値
    auto
対象となる要素
  • すべての要素
継承
  • あり

accent-colorのサンプルソース

.sample-checkbox {
  accent-color: red;
}

<label>
  <input type="checkbox" class="sample-checkbox" /> 
  サンプル
</label>

主要ブラウザの対応

IE11 ×
Edge(EdgeHTML) ×
Edge(Chromium)
Chrome
Firefox
Safari +15.4
iOS Safari +15.4
Android Chrome

用途から CSS プロパティやセレクタを探す

用途から CSS プロパティやセレクタを逆引きできます。

@-規則
メディアクエリ
セレクタ
疑似要素
疑似クラス
CSS関数
色の指定
背景
ボックス
アニメーション

対応ブラウザから CSS プロパティやセレクタを探す

対応ブラウザから CSS プロパティやセレクタを逆引きできます。

IE11
Edge(EdgeHTML)
Edge(Chromium)
Firefox
Chrome
Safari
iOS Safari
Android Chrome

このページの上部へ