W3 Watch Reference

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

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

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