accent-colorプロパティの説明
CSSのaccent-colorプロパティは、一部の要素で生成されるユーザーインターフェイスの強調色を指定します。この機能に対応しているのは、主に以下の要素となります。
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>