チェックボックスを画像を使わずにCSSでデザインする


フォームのチェックボックスをブラウザのデフォルトのデザインではなく、自分でデザインした画像などに置き換える…っていう手法はよくありますので割愛して、そのチェック部分をCSSでやっちゃおう、というのがこれ。

See the Pen css only checkbox by natsumi (CodePen.

以前も紹介したbox-shadowを利用する方法です。
:before疑似要素でボックス部分を、:after疑似要素でチェック部分を描画しています。
本来のinputは見えないようにどこかに行っていただいて、labelや親要素のliなんかに対してスタイル指定しちゃう。