Pure CSS Checkbox Image replacement multiple pairs

Question

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

Yep pretty much that's the technique. Place the checkbox next to a label element and style the label. It is working and Many people are styling radio buttons and checkbox inputs like this. I don't see any question in your post to put as an answer. — Ivan Drinchev
– Ivan Drinchev, Commented Feb 9, 2014 at 12:36

Radu Chelariu · Accepted Answer · 2014-02-09 12:46:34Z

2

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.

answered Feb 9, 2014 at 12:46

Radu Chelariu

4462 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

user3265026 Over a year ago

ok toy for your advice I just want to to know if I was doing it right and all so I need all the images to load at once as one click that need to change right away

Collectives™ on Stack Overflow

Pure CSS Checkbox Image replacement multiple pairs

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related