css - 纯 CSS 复选框图像替换

Question

我在表格中有一个复选框列表。 (行中的多个 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 忍者”教程，但我不得不承认它对我来说有点复杂。 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，复选框至少会默认显示处于关闭状态的图像，然后我将添加以下内容以启用

 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

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

Answer 1

你已经很接近了。只需确保隐藏复选框并将其与您通过 input[checkbox] + label

设置样式的标签相关联

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

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