入力フォームで使用する選択式の項目・ラジオボタン（radio）とチェックボックス（checkbox）。
今回は、見た目をカスタマイズするための方法をまとめました。
ラジオボタンとチェックボックスの基本的な使い方を知りたい方は、別記事でまとめましたので併せてどうぞ。
【HTML】ラジオボタン（radio）とチェックボックス（checkbox）①基本的な使い方｜nico MEMO
accent-colorで手軽に色変えする
フォームの見た目を簡単に変更できるCSSプロパティがaccent-colorです。
色味の変更で事足りるなら、accent-colorが超便利です！
CSSの新しいプロパティ「accent-color」が便利！今までできなかったフォーム要素のカラーを簡単に変更できる｜coliss
https://caniuse.com/?search=accent-color
下のcodepenでチェックを入れてみてください。checkedになったときに色がピンクになります。
See the Pen ラジオボタンとチェックボックスの見た目をカスタマイズ【accent-color】 by nico (@etsuko-kobanawa) on CodePen.
CSSを見ると、1行だけで超シンプルです。
ただ、accent-colorはあくまで色味の変更だけです。
より複雑なスタイルを適用したい場合は、次に紹介するように、疑似要素を使って再現します。
複雑なスタイルは、疑似要素を使うと便利！
ググると、動きのついたリッチなスタイルもヒットしますが
基本は同じで、下記のような考え方でスタイル付けします。
inputデフォルトのスタイルを非表示にする- 疑似要素でラジオボタン／チェックボックスのスタイルをつくる。
基本を押さえておくと応用も効きます。
ここではいちばんベーシックな方法を紹介します。
See the Pen ラジオボタンとチェックボックスの見た目をカスタマイズ【擬似要素を使う】 by nico (@etsuko-kobanawa) on CodePen.
まとめ
以上、ラジオボタンとチェックボックスの見た目をカスタマイズする方法をご紹介しました。
別記事で、selectタグのスタイル付けを紹介しました。フォームのカスタマイズに併せてご活用ください。
selectタグのスタイルをCSSでカスタマイズする｜nico MEMO
コメント