Input type="radio"をCSSだけで装飾する

CSSだけで頑張るシリーズ、今回はradioボタンに挑戦。

FirefoxでもIE10でも非対応なので、完全にスマホ用です。
といってもプロダクションで使うのはまだ気が引けますね。
これをベースにfallbackをきちんと作れば、何とかいけるかもってレベル。。。

iOS6, Android4.X～ではうまく動くはず。
手持ちのAndroid2.XではうまくスタイルされたけどAndroidは端末によって描画が全然違うことがあるので微妙。

Firefox(23.0.1)では、選択されたとき中心に青い丸が出るはずが、黒になってしまう。
あと、全体的にデザインが意図したとおりになっていない。っていうか程通い...
やっぱりappearance属性のサポートはまだ発展途上といったところですね。。。