CSSだけでチェックボックスやラジオボタンを可愛い感じにしてみた

サイトのチェックボックス、ラジオボタンを可愛い感じにするためのJavaScriptライブラリ。

ライブラリを使うことで、次のようなフォームを実現することが出来ます。

これCSSだけでできない? ということで、試してみました。
HTMLはこんな感じ。input要素の直後に、対応するlabel要素を書くこととします。

<form action="...">
  <div>
    <input id="c0" class="crirHiddenCSS" type="checkbox"
            name="c0" value="checked" />
    <label for="c0">Checkbox #0</label>
  </div>
  <div>
    <input id="c1" class="crirHiddenCSS" type="checkbox"
            name="c1" value="checked" checked="checked" />
    <label for="c1">Checkbox #1</label>
  </div>
  <div>
    <input id="r0" class="crirHiddenCSS" type="radio"
            name="r" value="0" />
    <label for="r0">Radio #0</label>
  </div>
  <div>
    <input id="r1" class="crirHiddenCSS" type="radio"
            name="r" value="1" checked="checked" />
    <label for="r1">Radio #1</label>
  </div>
  <div>
    <input type="submit" />
    <input type="reset" />
  </div>
</form>

CSSはこんな感じ。CSS3で追加予定 (のハズ) の:checkedセレクタを使います。

input.crirHiddenCSS {
  display: none;
}

input.crirHiddenCSS+label::before {
  padding-right: 16px;
  content: '';
  background: no-repeat;
  font: 16px monospace;
}

input.crirHiddenCSS[type='checkbox']+label::before {
  background-image:
        url(http://www.chriserwin.com/scripts/crir/crir/cross.png);
}

input.crirHiddenCSS[type='checkbox']:checked+label::before {
  background-image:
        url(http://www.chriserwin.com/scripts/crir/crir/tick.png);
}

input.crirHiddenCSS[type='radio']+label::before {
  background-image:
        url(http://www.chriserwin.com/scripts/crir/crir/bullet_white.png);
}

input.crirHiddenCSS[type='radio']:checked+label::before {
  background-image:
        url(http://www.chriserwin.com/scripts/crir/crir/bullet_green.png);
}

これをFirefoxで表示してみると…

…お、やりました。できたみたいです。
でもFirefoxだけというのもどうかと思うので、ほかのブラウザでも試してみました。いずれもOSはWindows XP Professional SP2で、標準準拠モード (XHTML 1.0 Strict, XML宣言なし) にしてます。

Mozilla Firefox 2.0.0.3

きちんと表示される。

Opera 9.20

リセットボタンを押しても反映されない。それ以外はきちんと表示される。

Microsoft Internet Explorer 6 SP2

ぜんぜんだめ。

Windows Internet Explorer 7

ぜんぜんだめ。

Firefox以外はだめだめでした。IEがだめなのはわかりますが、Operaおまえもか。
っていうかFirefoxとOperaバージョンアップしないといかん。

あ、ここに書いた方法だと [Tab] キーで選択できなくなるなどいくつか問題があるので、どっちにしても実際に使うことはないです。