title: Pure CSS Checkbox Image replacement multiple pairs
body: <p>I've got a checkbox list for payment examples  </p>
  
  <pre><code>&lt;input type='checkbox' name='methods' value='valuable' id="Paypal"/&gt;&lt;label id="PaypalL" for="Paypal"&gt;&lt;/label&gt;
    &lt;input type='checkbox' name='methods' value='valuable' id="MasterCard"/&gt;&lt;label id="MasterCardL" for="MasterCard"&gt;&lt;/label&gt;
      &lt;input type='checkbox' name='methods' value='valuable' id="Visa"/&gt;&lt;label id="VisaL" for="Visa"&gt;&lt;/label&gt; 
  </code></pre>
  
  <p>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 </p>
  
  <pre><code>  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;
      }
  </code></pre>
  
  <p>this is what i have come up with so far </p>