ブラウザごとに異なるチェックボックスの外観を統一したい!

初期設定のチェックボックス

特にFirefoxのフォーム関係のUIは残念な感じ。

screenshot.gif

カスタマイズしたチェックボックス

  • check3(no label)

あんまり変わってないけど・・!

もともとのinput要素をスタイルシートのdisplay属性で非表示にして、そこにimg要素を突っ込みます。input要素の包含要素がlabel要素の場合にはlabel要素に、それ以外は追加するimg要素自体にclickイベントを追加します。

クリックすると、画像の切り替えをするとともに、非表示になっているinput要素のchecked属性を変更します。

ソースはこちら

IE6だけチェックボックスの渡す値がおかしい

formを送信したとき、IE6以外はremoveAttribute()メソッドでchecked属性を削除すればnullが渡るのですが、IE6の場合nullは渡らないみたいなのでsetAttribute()メソッドでfalseを明示しないといけないようです。IE7はどうなんでしょ。

XHTMLではchecked属性のとりうる値は“checked"しかないはずなのにfalseを指定しないといけないのは気持ち悪い。