纯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,复选框至少会默认显示处于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

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

Answer 1

你已经很近了.只需确保隐藏该复选框并将其与您通过其设置的标签相关联input[checkbox] + label

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

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

Answer 2

如果选择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/