![MARKLEAPS[マークリープス]](https://markleaps.com/blog/wp-content/themes/mkl/images/00_logo.png){kind=logo}
フォーム要素の色を変更できるaccent-color プロパティの使い方
MARKLEAPS
CSSのaccent-color プロパティを使えば、チェックボックスやラジオボタンなどのフォーム要素の色を簡単に変更することができます。
accent-color を指定できる要素
・チェックボックス
・ラジオボタン
・レンジスライダー
・プログレスバー
accent-color プロパティの使い方
・html
|
1 2 3 4 5 6 7 8 9 |
<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> |
・css
|
1 2 3 |
.accented { accent-color: 任意のカラー; } |
・DEMO
DEMO
![[HTML] detailsとsummaryタグでアコーディオン（開閉）コンテンツを作る](https://markleaps.com/blog/wp-content/uploads/2024/08/html-details_summary-500x254.gif)
![[CSS] font-familyの指定方法](https://markleaps.com/blog/wp-content/uploads/2024/07/css-font-family01-500x254.jpg)
![[HTML] SEOに強いセマンティックコーディングとは](https://markleaps.com/blog/wp-content/uploads/2024/05/html-semantic01-500x254.gif)
![[CSS] カラーコードで透明度を指定する方法](https://markleaps.com/blog/wp-content/uploads/2024/04/css-rrggbbaa01-500x254.jpg)