纯CSScheckbox图像replace

我有一个表格中的checkbox列表。 （行中的许多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> 

我想用一对自定义开/关图像replacecheckbox图像，我想知道是否有人对CSS如何做一些更好的理解？

我发现这个“CSS忍者”教程，但我不得不承认find它有点复杂。 http://www.thecssninja.com/css/custom-inputs-using-css

据我所知，你可以使用伪类

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

我的期望是，通过添加上面的CSScheckbox将至less默认显示在closures状态的图像，然后我会添加以下来获得ON

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

不幸的是，似乎我错过了某个关键的步骤。 我试图使用自定义的CSS3select器语法来匹配我目前的设置 – 但必须缺less的东西（图像的大小为16×16，如果重要的话）

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

编辑：我一直在教程中，他把图像变化应用到标签，而不是input本身的东西。 我还没有得到页面上的checkbox结果的预期交换图像，但认为我更接近。

Answer 1

你已经接近了。 只要确保隐藏checkbox，并通过input[checkbox] + label其与您的样式相关联

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

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

Answer 2

如果您selectCSS3，使用javascript似乎是不必要的。

通过使用:beforeselect器:before ，你可以在两行CSS中做到这一点。 （不涉及脚本）。

这种方法的另一个优点是它不依赖于<label>标签，即使缺失也能正常工作。

注意：在没有CSS3支持的浏览器中，checkbox看起来很正常。 （向下兼容）。

 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/

Answer 3

如果您仍然在寻找更多的定制，

看看下面的库： https : //lokesh-coder.github.io/pretty-checkbox/

谢谢