ラジオボタンやチェックボックスの装飾
2021-06-06
フォームを作成した際に、<input>の装飾をしたい場合などがあるかと思いますが、radioやcheckboxなどは、少し手を加える必要があるので、今回は、そのメモになります。
ラジオボタン
まずは、ベースとなるhtmlの記述は下記のようになります。
|
1 2 3 4 5 6 |
<div class="sample"> <div><input type="radio" name="sample-1" id="radio-1"><label class="radio" for="radio-1">春</label></div> <div><input type="radio" name="sample-1" id="radio-2"><label class="radio" for="radio-2">夏</label></div> <div><input type="radio" name="sample-1" id="radio-3"><label class="radio" for="radio-3">秋</label></div> <div><input type="radio" name="sample-1" id="radio-4"><label class="radio" for="radio-4">冬</label></div> </div> |
擬似要素によるカスタマイズ
<label>に擬似要素を作って、ラジオボタンをカスタマイズしていきます。