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

问题描述

我有一个用于支付示例的复选框列表

 < input type ='checkbox'name ='methods' value ='valuable'id =Paypal/>< label id =PaypalLfor =Paypal>< / label> 
< input type ='checkbox'name ='methods'value ='valuable'id =MasterCard/>< label id =MasterCardLfor =MasterCard>< / label> 
< input type ='checkbox'name ='methods'value ='valuable'id =Visa/>< label id =VisaLfor =Visa>< / label> 
  

我想用一对自定义开/关图像替换复选框图像，而我想知道是否有人更好地了解如何使用CSS做到这一点？
每个图像复选框将需要一组不同的图像对，以较少的代码方式

  input [type = checkbox] {
 display：none; 
} 
 
 input [type = checkbox] + #PaypalL 
 {
 background：url（'PayPalOff.png'）0 0px no-repeat; 
 height：40px; 
 width：64px; 
 display：block; 
 padding：0 0 0 0px; 
} 
 
 input [type = checkbox]：checked + #PaypalL 
 {
 background：url（'PayPalOn.png'）0 0px no-repeat; 
 height：40px; 
 width：64px; 
 padding：0 0 0 0px; 
} 
 
 
 
 #MasterCard + #MasterCardL 
 {
 background：url（'MasterCardOff.png'）0 0px no-repeat ; 
 height：40px; 
 width：64px; 
 display：block; 
 padding：0 0 0 0px; 
} 
 
 #MasterCard：已检查+ #MasterCardL 
 {
背景：url（'MasterCardOn.png'）0 0px不重复; 
 height：40px; 
 width：64px; 
 padding：0 0 0 0px; 
} 
 #Visa + #VisaL 
 {
 background：url（'VisaOff.png'）0 0px no-repeat; 
 height：40px; 
 width：64px; 
 display：block; 
 padding：0 0 0 0px; 
} 
 
 #Visa：checked + #VisaL 
 {
 background：url（'VisaOn.png'）0 0px no-repeat; 
 height：40px; 
 width：64px; 
 padding：0 0 0 0px; 
} 
  

这是我到目前为止所得到的结果

解决方案

您的方法目前是最干净的。没有JS，它也适用于旧版浏览器，那么究竟是什么问题呢？我要做的唯一事情就是精简整个CSS，因为它目前并不真正利用CSS中的C级联，也就是说，还将不同的卡片图像整合到一个精灵中。像这样：

  input [type = checkbox] {display：none; } 
 
 input [type = checkbox] + label {
 background-image：url（'cards.png'）; 
 display：block; 
 height：40px; 
 padding：0; 
 width：64px; } 
 
 #Paypal + #PaypalL {background-position：0 0; } 
 #Paypal：checked + #PaypalL {background-position：0 -40px; } 
 
 #MasterCard + #MasterCardL {background-position：0 -80px; } 
 #MasterCard：checked + #MasterCardL {background-position：0 -120px; } 
 
 #Visa + #VisaL {background-position：0 -160px; } 
 #Visa：checked + #VisaL {background-position：0 -200px;在上面的例子中，精灵将卡片图像堆叠在一起，每个图像都堆叠在一起，每个图像40px高，因此背景位置偏移量。
 
 
 
否则，您的代码是稳定的，这是我个人做的，而不是其他任何复选框替代解决方案。 p> 
I've got a checkbox list for payment examples  
<input type='checkbox' name='methods' value='valuable' id="Paypal"/><label id="PaypalL" for="Paypal"></label>
  <input type='checkbox' name='methods' value='valuable' id="MasterCard"/><label id="MasterCardL" for="MasterCard"></label>
    <input type='checkbox' name='methods' value='valuable' id="Visa"/><label id="VisaL" for="Visa"></label> 
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?
each image check box will need a different set of image pair is there in a less code way 
  input[type=checkbox] {
    display:none;
  }

  input[type=checkbox] + #PaypalL
   {
       background: url('PayPalOff.png') 0 0px no-repeat;
        height: 40px;
        width: 64px;
        display:block;
       padding: 0 0 0 0px;
   }

   input[type=checkbox]:checked + #PaypalL
    {
        background: url('PayPalOn.png') 0 0px no-repeat;
        height: 40px;
        width: 64px;
        padding: 0 0 0 0px;
    }



 #MasterCard + #MasterCardL
   {
       background: url('MasterCardOff.png') 0 0px no-repeat;
        height: 40px;
        width: 64px;
        display:block;
       padding: 0 0 0 0px;
   }

   #MasterCard:checked + #MasterCardL
    {
        background: url('MasterCardOn.png') 0 0px no-repeat;
        height: 40px;
        width: 64px;
        padding: 0 0 0 0px;
    }
 #Visa + #VisaL
   {
       background: url('VisaOff.png') 0 0px no-repeat;
        height: 40px;
        width: 64px;
        display:block;
       padding: 0 0 0 0px;
   }

   #Visa:checked + #VisaL
    {
        background: url('VisaOn.png') 0 0px no-repeat;
        height: 40px;
        width: 64px;
        padding: 0 0 0 0px;
    }
this is what i have come up with so far 
解决方案
Your approach is the cleanest currently possible. There's no JS, it works with older browsers as well, so what's the problem, exactly? The only thing I would do would be to streamline the whole CSS, as it's currently not really making use of the C in CSS - cascading, that is, and also consolidate the different card images in a sprite. Like so:
input[type=checkbox]{  display:none; }

input[type=checkbox] + label{
    background-image: url('cards.png');
    display: block;
    height: 40px;
    padding: 0;
    width: 64px; }

#Paypal + #PaypalL{ background-position: 0 0; }
#Paypal:checked + #PaypalL{ background-position: 0 -40px; }

#MasterCard + #MasterCardL{ background-position: 0 -80px; }
#MasterCard:checked + #MasterCardL{ background-position: 0 -120px; }

#Visa + #VisaL{ background-position: 0 -160px; }
#Visa:checked + #VisaL{ background-position: 0 -200px; }
In the example above, the sprite has the card images stacked one on top of the other, each 40px high, hence the background-position offset.

Otherwise, your code is solid and it's what I would personally do, over any other checkbox replacement solution out there.

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