checkbox(or radio)のスタイルを変更するには？

HTMLのFORM要素のcheckbox(input type=checkbox)とradio(input type=radio)。
checkboxとradioの見た目を変更したいという要望がある。

スタイルシート(CSS)を用いれば可能かと思うが、このFORM要素は、CSSで変更できない。特にIE8以下は、完全に不可能です。
※CSS3から変更可能。

だけど、どうしてもデザイン的に変更させたい、というのであればいろんな手を使って実現させることは可能です。

ただ実現させるのではなくて、FORMの要素としてもちゃんとチェックされている、選択されているという状態であることも大事です。
（phpなどでサーバ側でチェックされている状態が受け取ることができることが重要）

実現方法を簡単に説明すると、チェックボックスを隠し、チェックされていない画像、チェックされた画像を用意し切り替える。

ということになります。

もうちょっと具体的には、以下。

1. チェックボックスチェックされた画像、チェックが外れた画像を用意。
2. チェックボックスを消します。display:noneにて。
3. １で用意した画像をLABELタグに配置。(background-image)
4. CSS内で、checkedセレクタにてチェックされた時の画像に切り替えるようにする。

通常、checkboxやradioボタンについては、LABELタグを用います。そのLABELタグに対してデザインされたチェックボックスの画像を用意し、チェックされた時、チェックされないときをCSSのセレクタを利用して定義するのです。そうすることでチェックボックスを疑似的にデザインしたことになります。LABELをクリックしているので、当然、input type=checkboxのチェック状態も変更され、サーバ側での状態取得も可能です。

ここで問題なのは、IE8。IE8には、input[type=checkbox]:checkedというcheckedセレクタがありません。IE9以降対応でよければ問題ないのですが、IE8に対応させるためにはどうすればいいのか。
これはもう力技ということになります。クリックイベントを用意して、checkboxをクリックする処理を追加してあげる必要がありますね。jQueryにて。
ただ、この処理を追加するならば、CSSのcheckedセレクタは不要ですね。ぜんぶこっちで動作するようになりますので。

以下、jQueryのコードです。※jQueryは1.x系ですよ。IE8対応なので。

[js]
$(function(){
$(‘#labelCheckbox1’).mouseup(function(){
$(‘#checkbox1’).click();
});
});
[/js]