我在一张桌子里有一张核对盒 list .(该行上的多个CB之一)
<tr><td><input type="checkbox" class="custom_image" value="1" id="CB1" /><label for='CB1'> </label></td></tr>
<tr><td><input type="checkbox" class="custom_image" value="2" id="CB2" /><label for='CB2'> </label></td></tr>
<tr><td><input type="checkbox" class="custom_image" value="3" id="CB3" /><label for='CB3'> </label></td></tr>
<tr><td><input type="checkbox" class="custom_image" value="4" id="CB4" /><label for='CB4'> </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;
}
不幸的是，我似乎错过了关键的一步.我曾try 使用自定义CSS3 Select 器语法来匹配我当前的设置，但肯定缺少了什么(如果有必要的话，图像的大小是16x16)
http://www.w3.org/TR/css3-selectors/#checked个
编辑: 我在教程中遗漏了一些内容，其中他将图像更改应用于标签，而不是输入本身.我仍然没有得到预期的图像交换复选框结果在页面上，但我想我更接近了.