フォーム要素の色を変更できる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] カラーコードで透明度を指定する方法

関連最新記事

[HTML] detailsとsummaryタグでアコーディオン（開閉）コンテンツを作る

[CSS] font-familyの指定方法

[HTML] SEOに強いセマンティックコーディングとは

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

社内風景

社内風景2