css3でカスタムチェックボックス

jsdoitを使いたかったので使ってみる。

今開発してるandroidのプロジェクトで、ブラウザ提供のださくて小さいチェックボックス・ラジオボタンをつかわずにもっとかっこよくて押しやすいボタンを表示されなきゃならなくなったのだけど、
http://www.webcreatorbox.com/tech/css3-jquery-form/
にあるJqueryを使って画像（とcssのクラス）を入れ替えることで選択時・未選択時に表示する画像を変える方法だと、スマホでは表示変化にものすごい時間がかかってしまう。僕の先輩のHTC EVOでは体感的に0.5〜1sほどかかっていた気がする。その先輩の日ごろの行いが悪いからそういう現象出てるだけじゃねえの･･･？みたいに思ってて最初は信じられなかったけど、他の端末でも遅いみたい。
$(".checkbox").changeというのが、チェックボックスのイベントハンドラらしいが、おそらく内部的にはonclickをbindしてるのだろう。clickイベントはスマホのイベントハンドラの中でも最も遅いタイミングで発動するものの1つであるのと、jqueryそのものの遅さとが相まって異常なまでの遅さが生み出されてしまったと予想できる。

で、とにかく自然な速さでチェック時の表示が変わってくれるようなものを作ろうと思ったのだけど、特にスマホの場合は腐った牛乳のことを一切考えなくてもいいので、css3のセレクタを使ってcssのみでこれを実現してみた。

cssのみでカスタムボタン - jsdo.it - share JavaScript, HTML5 and CSS

チェックされてないときは背景赤の「not checked」という文字が、チェックされると背景黄色で「checked!!」と表示される。全然カスタムチェックボックス（ラジオボタン）ぽくないけど、contentの中身を url() みたいに画像指定してやればいい感じになるよ！jsdoitで画像適当に貼り付ける方法がわかんないだけだよ！フリー素材直リンしたら烈火のごとく怒られちゃうし！
いくつかのポイントは以下。

E:checked

一番の肝となるのはチェックの有無の判定方法。これはcss3で追加された :checked という擬似クラスを使用すればいい。名前からも創造できるように、対象要素(E)がチェックされていた場合にそのプロパティが実行される。

content

カスタムチェックボックスっぽい画像はどうやって表示させようかと考えあぐねていたんだけども、デフォルトのラジオボタンは表示させたくないからheight:0にしてるので、input要素のbackgroundに画像指定はできない。親要素のlabeのbackgroundとして表示させようにも、親要素を指定できるcssのセレクタはないし、じゃあdivタグでも１つ追加して、そいつのbackgroundに画像を指定してやろうかとも思ったけど、htmlが汚くなるのであまりやりたくない。
で、思いついたのがcontentで画像を生成する方法。そのままだと、contentの幅文の要素幅はとってくれないので、labelの文字はうまいことpadding-leftで調整してやらないとかぶってしまう。