html 图片代替多选框,纯CSS复选框图像替换

我在表格中有一个复选框列表。(行中的一些CB)

    

我想用一对自定义的开/关图像替换复选框图像，我想知道是否有人更好地理解如何使用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

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