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

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

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

这是我到目前为止提出的

最佳答案

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

否则，您的代码将是可靠的，这是我个人将要执行的工作，而不是其他任何复选框替换解决方案。

关于html - 纯CSS复选框图像替换多对，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/21659056/