純粋なCSSによるチェックボックスの画像置き換え

質問

テーブルの中にチェックボックスのリストがあります。 (行にある多数のCBのうちの1つ)

 <tr><td><input type="checkbox" class="custom_image" value="1" id="CB1" /><label for='CB1'>&nbsp;</label></td></tr>
 <tr><td><input type="checkbox" class="custom_image" value="2" id="CB2" /><label for='CB2'>&nbsp;</label></td></tr>
 <tr><td><input type="checkbox" class="custom_image" value="3" id="CB3" /><label for='CB3'>&nbsp;</label></td></tr>
 <tr><td><input type="checkbox" class="custom_image" value="4" id="CB4" /><label for='CB4'>&nbsp;</label></td></tr>

私はチェックボックスの画像をカスタムオン/オフ画像のペアで置き換えたいと思います。

この "CSS ninja" チュートリアルを見つけましたが、私にとっては少し複雑だと認めざるを得ません。 http://www.thecssninja.com/css/custom-inputs-using-css

私の知る限りでは、擬似クラスを使っていいのは

 td:not(#foo) > input[type=checkbox] + label
 {
     background: url('/images/off.png') 0 0px no-repeat;
     height: 16px;
     padding: 0 0 0 0px;
 }

私の予想では、上記のCSSを追加することで、少なくともチェックボックスはデフォルトでOFFの状態で画像を表示し、ONにするために以下のように追加するつもりでした。

 td:not(#foo) > input[type=checkbox]:checked + label {
     background: url('/images/on.png') 0 0px no-repeat;
 }

残念ながら、私はどこかで重要なステップを逃しているようです。 現在の設定に一致するように、カスタム CSS3 セレクタ構文を使用しようとしましたが、何かを見逃しているようです (重要であれば、画像のサイズは 16x16 です)。

http://www.w3.org/TR/css3-selectors/#checked

EDITです。 チュートリアルの中で、画像の変更を入力自体ではなく、ラベルに適用しているのを見逃していました。 ページ上のチェックボックスの結果について期待されるスワップされた画像をまだ得ていませんが、もう少しで得られそうです。

どのように解決するのですか?

あなたはすでに近いです。チェックボックスを非表示にし、ラベルに関連付けるだけです。 input[checkbox] + label

コードを完成させる。 http://gist.github.com/592332

JSFiddleです。 http://jsfiddle.net/4huzr/