accent-color：一部の要素の強調色を指定する

accent-colorプロパティの説明

accent-colorは、一部の要素で生成されるユーザーインターフェイスの強調色を指定します。この機能に対応しているのは、主に以下の要素となります。

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

accent-colorに指定できる値

auto

ユーザーエージェントのスタイルに従います。

<color>

色を指定する<color>の値を指定します。<color>は、CSSで一つの色を表すデータ型の文字列です。使用できる形式は、キーワード、16進数、RBG値、HSL値などがあります。

accent-colorの使い方とサンプル

accent-colorプロパティの構文は以下の通りです。

/* キーワード値 */
accent-color: auto;
accent-color: red;
accent-color: green;
accent-color: blue;

/* 16進数 */
accent-color: #f00;
accent-color: #ff0000;

/* RBG値 */
accent-color: rgb(255, 0, 0);
accent-color: rgba(255, 0, 0, 0.5);

/* HSL値 */
accent-color: hsl(0, 100%, 50%);
accent-color: hsla(0, 100%, 50%, 0.5);

/* グローバル値 */
accent-color: initial;
accent-color: inherit;
accent-color: revert;
accent-color: unset;

accent-colorの実例

それでは、実際にaccent-colorの書き方を見ていきましょう。以下の内容で、入力・送信フォームのチェックボックスにaccent-colorを適用した時の挙動を確認できます。

#acolor_sample input {
	display: inline-block;
	width: 20px;
	height: 20px;
	vertical-align: middle;
}
#acolor_sample input#ac1 {
	accent-color: auto;
}
#acolor_sample input#ac2 {
	accent-color: red;
}
#acolor_sample input#ac3 {
	accent-color: #00ff66;
}

<div id="acolor_sample">
	<input type="checkbox" id="ac1" checked>
	<label for="ac1">auto</label><br>
	<input type="checkbox" id="ac2">
	<label for="ac2">red</label><br>
	<input type="checkbox" id="ac3">
	<label for="ac3">#00ff66</label><br>
</div>