html - 纯CSS复选框图片替换多对

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 - 级联，也就是将不同的卡片图像合并到一个 sprite 中。像这样:

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

在上面的例子中，sprite 的卡片图像一个叠一个，每个 40 像素高，因此背景位置偏移。

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