フォーム要素の色を変更できるaccent-color プロパティの使い方

MARKLEAPS

2023.10.13

CSSのaccent-color プロパティを使えば、チェックボックスやラジオボタンなどのフォーム要素の色を簡単に変更することができます。

accent-color を指定できる要素

・チェックボックス
・ラジオボタン
・レンジスライダー
・プログレスバー

accent-color プロパティの使い方

・html

<input type="checkbox" class="accented">checkbox</input>

<input type="radio" class="accented">radio</input>

<label for="rangeAccented">range</label>
  <input id="rangeAccented" type="range" min="0" max="100" class="accented">
</label>

<progress max="100" value="50" class="accented"> 50% </progress>

<input type="checkbox" class="accented">checkbox</input>

<input type="radio" class="accented">radio</input>

<label for="rangeAccented">range</label>

</label>

・css

.accented {
	accent-color: 任意のカラー;
}

.accented {

accent-color: 任意のカラー;

}

・DEMO

DEMO

CSS

よく読まれている関連記事

[CSS] カラーコードで透明度を指定する方法

フォーム要素の色を変更できるaccent-color プロパティの使い方

accent-color を指定できる要素

accent-color プロパティの使い方

よく読まれている関連記事

[CSS] カラーコードで透明度を指定する方法

関連最新記事

[CSS] display: none;、opacity: 0;、overflow: hidden; の違いと使い分け

[HTML] sectionとdivの違いとは？正しい使い分け方とSEOへの影響

HTML＋CSSでできる！Core Web Vitals（LCPFIDCLS）の改善実例

CSSだけでできる！JavaScript不要のタブ切り替え実装方法

社内風景2

社内風景