纯 CSS 复选框图像替换 [英] Pure CSS checkbox image replacement
问题描述
我在表格中有一个复选框列表.(该行的多个 CB 之一)
I've got a checkbox list in a table. (one of a number of CB's on the row)
<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 有更好的理解?
I'd like to replace the checkbox image with a pair of custom on/off images and I was wondering if anyone had some better understanding of how to do this with CSS?
我找到了这个CSS ninja"教程，但我不得不承认它对我来说有点复杂.http://www.thecssninja.com/css/custom-inputs-using-css
I've found this "CSS ninja" tutorial, but I'll have to admit to finding it a bit complex for me. http://www.thecssninja.com/css/custom-inputs-using-css
据我所知，你可以使用伪类
As far as I can tell, you're allowed to use a pseudo class
td:not(#foo) > input[type=checkbox] + label
{
background: url('/images/off.png') 0 0px no-repeat;
height: 16px;
padding: 0 0 0 0px;
}
我的期望是，通过添加上面的 CSS，复选框至少会默认在关闭状态下显示图像，然后我会添加以下内容以打开
My expectation was that by adding the above CSS the checkbox would at least default to displaying the image in the OFF state and then I'd add the following to get the ON
td:not(#foo) > input[type=checkbox]:checked + label {
background: url('/images/on.png') 0 0px no-repeat;
}
不幸的是，我似乎在某处遗漏了一个关键步骤.我尝试使用自定义 CSS3 选择器语法来匹配我当前的设置 - 但必须缺少一些东西(如果重要，图像大小为 16x16)
Unfortunately, it seems I'm missing a critical step somewhere. I've tried to use the custom CSS3 selector syntax to match my current setup - but must be missing something (The images are size 16x16 if that matters)
http://www.w3.org/TR/css3-selectors/#勾选
我在教程中遗漏了一些东西，他将图像更改应用于标签而不是输入本身.我仍然没有获得页面上复选框结果的预期交换图像，但我认为我更接近了.
I'd been missing something in the tutorial where he applies the image change to the label and not the input itself. I'm still not getting the expected swapped image for checkbox result on page, but think I'm closer.
推荐答案
您已经接近了.只需确保隐藏复选框并将其与您通过 input[checkbox] + label
You are close already. Just make sure to hide the checkbox and associate it with a label you style via input[checkbox] + label
完整代码:http://gist.github.com/592332
JSFiddle:http://jsfiddle.net/4huzr/
这篇关于纯 CSS 复选框图像替换的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
