Question

我有一个付款示例的复选框列表

<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>

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

这是我到目前为止所提出的

Answer 1

您的方法是目前最干净的方法。没有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高，因此背景位置偏移。

否则，您的代码是可靠的，这是我个人所做的，而不是任何其他的复选框替换解决方案。

纯CSS复选框图像替换多对

1 个答案: