纯CSS复选框图像替换 [英] Pure CSS Checkbox Image replacement

问题描述

我在表格中有一个复选框列表。 （行中的多个CB中的一个）

 < tr>< td>< input type = class =custom_imagevalue =1id =CB1/>< label for ='CB1'>& nbsp;< / label>< / td>< / tr> 
< tr>< td>< input type =checkboxclass =custom_imagevalue =2id =CB2/>< label for ='CB2'> < / label>< / td>< / tr> 
< tr>< td>< input type =checkboxclass =custom_imagevalue =3id =CB3/>< label for ='CB3'> < / label>< / td>< / tr> 
< tr>< td>< input type =checkboxclass =custom_imagevalue =4id =CB4/>< label for ='CB4'>& < / label>< / td>< / tr> 
  

我想用一对自定义开/关图片替换复选框图片，想知道是否有人对CSS如何做到这一点有更好的理解？

我发现这个CSS忍者教程，但我必须承认找到它对我来说有点复杂。 http://www.thecssninja.com/css/custom-inputs-using- css

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

  td：not（#foo）>输入[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） >输入[type = checkbox]：checked + label {
 background：url（'/ images / on.png'）0 0px no-repeat;不幸的是，似乎我错过了一个关键的步骤。我尝试使用自定义的CSS3选择器语法来匹配我当前的设置 - 但必须缺少的东西（图像是大小16x16如果重要）
 
 
 
  http://www.w3.org/TR/css3-selectors/#checked  
 
 
 
编辑：
我在教程中缺少一些东西，他将图像更改应用到标签，而不是输入本身。 
解决方案
您正在使用的图片关闭已经。只需确保隐藏复选框，并通过输入[checkbox] +标签 
 $ style将其与您创建的标签相关联。
 
 
 完整代码： http://gist.github.com/592332   
 
 
 
 JSFiddle： http://jsfiddle.net/4huzr/  
 
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'>&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>
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?

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;
 }
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;
 }
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/#checked

EDIT:
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.
解决方案
You are close already. Just make sure to hide the checkbox and associate it with a label you style via input[checkbox] + label

Complete Code: http://gist.github.com/592332

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

                        
这篇关于纯CSS复选框图像替换的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！