CSS ラジオボタンやチェックボックスの装飾

2021-06-06

フォームを作成した際に、<input>の装飾をしたい場合などがあるかと思いますが、radioやcheckboxなどは、少し手を加える必要があるので、今回は、そのメモになります。


ラジオボタン

まずは、ベースとなるhtmlの記述は下記のようになります。


擬似要素によるカスタマイズ

<label>に擬似要素を作って、ラジオボタンをカスタマイズしていきます。