CSS

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


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

See the Pen css only checkbox by natsumi (@mayo31) on CodePen.18228

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

スポンサードリンク

菜摘

Web制作がメインですがときどきフライヤーデザインやCDラベルなどDTP系もやってます。 デザイナーだったはずがhtml/cssコーディングに目覚めた。 黒い画面は相変わらず怖い。 javascriptはこのごろちょっと頑張ってるよ。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です