HTML一覧CSS一覧CSS関数FlexboxシミュレーターCSS一覧

色

accent-color チェックやスライダーの色を変える

重要度3 / 5

意味

チェックボックス、ラジオボタン、範囲スライダーの強調色を、サイトの色に合わせたいときに使います。ブラウザごとの初期色の差を、一つの指定で揃えやすくなります。

入力欄の枠や背景までは変わりません。枠は border、背景は background-color で別に指定します。

コード

HTMLとCSSをコピーして、自分のファイルへ貼り付ければ同じ見た目を確認できます。

HTML
<label><input type="checkbox" checked> 受け取る</label>
CSS
label {
  accent-color: #3b2f86;
}

プレビュー

ブラウザ対応

主要ブラウザの対応状況
ブラウザ対応
Chrome93〜
Firefox92〜
Safari26.2〜
Edge93〜
Chrome Android93〜
Safari iOS26.2〜

出典: MDN Web Docs(`@mdn/browser-compat-data`)