チェックボックスとラジオボタンをcssで装飾する方法。
チェックボックス
See the Pen
checkbox by どら (@pochi__2828)
on CodePen.
HTML
ラベルをクリックした際もチェックされるように、<input>を<label>で囲む。
<input>の後に<span>を追加してクラス名を付与。
CSS
display:none;で元のチェックボックスを非表示。
.check::beforeでチェックされる前の枠を装飾。
input[type=”checkbox”]:checked + .check::beforeでチェックされた後の枠を装飾。
input[type=”checkbox”]:checked + .check::afterでチェックマークを装飾。
マークはボーダーで生成。
ラジオボタン
See the Pen
radio by どら (@pochi__2828)
on CodePen.
HTML
ラベルをクリックした際もチェックされるように、<input>を<label>で囲む。
<input>の後に<span>を追加してクラス名を付与。
CSS
display:none;で元のラジオボタンを非表示。
.radio::beforeでチェックされる前の枠を装飾。
input[type=”radio”]:checked + .radio::afterでチェックマークを装飾。