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