【スマートフォン制作向け】checkboxをCSSのみでカスタマイズ
こんにちは、ishida です。
先週金曜日、横浜スタジアムでノーヒットノーランをこの目で見ました。
やっぱり野球はスタジアム観戦がいいですな。
さてさて、以前こちらのブログで
【スマートフォン制作向け】radioボタンをCSSのみでカスタマイズ
という記事を書きましたが、今回はこちらの続編でcheckboxカスタマイズをご紹介します。
ソースコード
コードはこちらです。
あっ、それと バシャログ。で js.do.it アカウントを作成しましたので、
よろしければフォローしていただると幸いです。
ポイント
- checkbox本体を、appearanceプロパティをbuttonにしています。
- checkboxがチェックされた場合に、:checked疑似クラスをつかいます。
- :checked疑似クラス ＋ before疑似要素 ＋ after疑似要素を組み合わせて、チェックされた時のデザインを作ります。
- CSS3の transform:rotate を使用して、デザインパーツを回転させます。
最近まで、このようなパーツは全て画像として使用してましたが
CSSでも簡単に出来るもんですね。
