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 | ○ |