纯CSS复选框图像替换

我在表中有一个复选框列表。（该行中的多个CB之一）

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

编辑：我在本教程中丢失了一些内容，在该内容中，他将图像更改应用于标签而不是输入本身。我仍然没有在页面上得到复选框结果的预期交换图像，但是我想离得更近了。

您已经关闭了。只需确保隐藏复选框，并将其与您通过样式设置的标签相关联即可input[checkbox] + label

完整代码：http：//gist.github.com/592332

JSFiddle：http : //jsfiddle.net/4huzr/

如果选择CSS3，似乎不需要使用javascript。

通过使用:before选择器，您可以在两行CSS中完成此操作。（不涉及脚本）。

这种方法的另一个优点是它不依赖<label>标签，即使丢失也可以使用。

注意：在不支持CSS3的浏览器中，复选框看起来很正常。（向下兼容）。

input[type=checkbox]:before { content:""; display:inline-block; width:12px; height:12px; background:red; }
input[type=checkbox]:checked:before { background:green; }​

您可以在此处查看演示：http : //jsfiddle.net/hqZt6/1/

还有一张带有图片的图片：

http://jsfiddle.net/hqZt6/6/

如果您仍在寻找更多定制功能，

签出以下库：https : //lokesh-coder.github.io/pretty-checkbox/

谢谢