<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？

我发现这个“CSS忍者”教程，但我必须承认，对我来说有点复杂。 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的复选框至少会默认显示图像处于关闭状态，然后我将添加以下内容以获得ON

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

不幸的是，它似乎我错过了一个关键的一步。我试图使用自定义CSS3选择器语法来匹配我当前的设置 – 但必须缺少的东西(图像大小16×16如果重要)

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

编辑：
我在教程中缺少一些东西，他将图像更改应用到标签，而不是输入本身。我仍然没有得到页面上的复选框结果的预期交换图像，但认为我更接近。