フォーム要素の色を変更できる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プロパティの記述順｜視覚順とアルファベット順

[CSS] shape-outside プロパティで画像にテキストを回り込ませる方法

[HTML・CSS] 説明リストdlのdtとddを横並びに表示する方法（コピペで使えるコード付き）

[CSS] 疑似クラス is() とwhere() の使い方と違い

社内風景2

社内風景