CSS Reference

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; を指定したチェックボックスは、対応ブラウザにおいて、チェックした際に 「赤」 がアクセントカラーとして使用されます。

なお、Safariにおいて、白などの薄い色を指定した場合、コントラスト比が確保されず、例えばチェックボックスなどでは、チェックされたことが判別しにくい、あるいは判別できない状態になる場合があります。使用する場合は注意が必要です。

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 プロパティやセレクタを逆引きできます。

Edge（EdgeHTML）
Edge（Chromium）
Firefox
Chrome
Safari
iOS Safari
Android Chrome