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

初期値 auto
適用対象 全ての要素
継承 する
アニメーション 計算値の型による
対応ブラウザ caniuseで確認

accent-colorプロパティの説明

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

accent-colorに指定できる値

auto
ユーザーエージェントのスタイルに従います。
<color>
色を指定する<color>の値を指定します。<color>は、CSSで一つの色を表すデータ型の文字列です。使用できる形式は、キーワード、16進数、RBG値、HSL値などがあります。

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

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

CSS
/* キーワード値 */
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を適用した時の挙動を確認できます。

CSS
#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;
}
HTML
<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>
表示確認

accent-colorに関連するCSSプロパティ

インターフェイスの装飾
accent-color 一部の要素の強調色を指定する
all 要素の全てのプロパティを初期化する
appearance ブラウザが独自に描画する標準的なUIをCSSで変更できるようにする
caret-color テキストの挿入位置や選択補助として表示されるキャレットの色を指定する
cursor マウスポインタのカーソルの種類を指定する
scrollbar-base-color スクロールバーのベースになる色を指定する
scrollbar-arrow-color スクロールバーの矢印にあたる色を指定する
scrollbar-face-color スクロールバーの表面にあたる色を指定する
scrollbar-3dlight-color スクロールバーの左端と上端にあたる色を指定する
scrollbar-highlight-color スクロールバーのハイライトにあたる色を指定する
scrollbar-shadow-color スクロールバーの影にあたる色を指定する
scrollbar-darkshadow-color スクロールバーの右端と下端にあたる色を指定する