色
accent-color チェックやスライダーの色を変える
意味
チェックボックス、ラジオボタン、範囲スライダーの強調色を、サイトの色に合わせたいときに使います。ブラウザごとの初期色の差を、一つの指定で揃えやすくなります。
入力欄の枠や背景までは変わりません。枠は border、背景は background-color で別に指定します。
コード
HTMLとCSSをコピーして、自分のファイルへ貼り付ければ同じ見た目を確認できます。
<label><input type="checkbox" checked> 受け取る</label>label {
accent-color: #3b2f86;
}プレビュー
ブラウザ対応
| ブラウザ | 対応 |
|---|---|
| Chrome | 93〜 |
| Firefox | 92〜 |
| Safari | 26.2〜 |
| Edge | 93〜 |
| Chrome Android | 93〜 |
| Safari iOS | 26.2〜 |
出典: MDN Web Docs(`@mdn/browser-compat-data`)