【スマートフォン制作向け】checkboxをCSSのみでカスタマイズ

【スマートフォン制作向け】checkboxをCSSのみでカスタマイズ

イメージ

こんにちは、ishida です。
先週金曜日、横浜スタジアムでノーヒットノーランをこの目で見ました。
やっぱり野球はスタジアム観戦がいいですな。

さてさて、以前こちらのブログで
【スマートフォン制作向け】radioボタンをCSSのみでカスタマイズ
という記事を書きましたが、今回はこちらの続編でcheckboxカスタマイズをご紹介します。

ソースコード

コードはこちらです。
あっ、それと バシャログ。で js.do.it アカウントを作成しましたので、 よろしければフォローしていただると幸いです。

ポイント

  • checkbox本体を、appearanceプロパティをbuttonにしています。
  • checkboxがチェックされた場合に、:checked疑似クラスをつかいます。
  • :checked疑似クラス + before疑似要素 + after疑似要素を組み合わせて、チェックされた時のデザインを作ります。
  • CSS3の transform:rotate を使用して、デザインパーツを回転させます。

最近まで、このようなパーツは全て画像として使用してましたが
CSSでも簡単に出来るもんですね。

  • このエントリーをはてなブックマークに追加

この記事を読んだ人にオススメ