Using different images for checkboxes in CSS

Question

I have seen questions asking how to replace the checkbox with an image which have been answered, but I am having a separate issue. I am trying to make a form with multiple check boxes, each with a different image to be used as the button by the user. Every time I try to have 2 different images, one won't show, and only one button will work. Any help is appreciated!

Here's my code:

     .services_form input[type="checkbox"]{
	    display:none;
     }


     .services_form input[type=checkbox]:checked + label
     {
	      background-color: #bdc3c7;
	      background-size: 100%;
	      height: 250px;
	      width: 250px;
          opacity: 0.5;
	      display:inline-block;
	      padding: 0 0 0 0px;
     }


     .services_form input[type=checkbox] + label
     {
	      background-size: 100%;
	      height: 250px;
	      width: 250px;
	      display:block;
	      float: left;
	      padding: 0 0 0 0px;
	      cursor: pointer;
     }

    #accomButton{
	     background: url("button1.png") no-repeat;
    }

    #fooBar{
         background-image: url("button2.png");
    }

    .button {
	     float: left;
	     width: 35%;
	     height: 35%;
	     border-radius: 15%;
	     margin: 5% 5% 5% 5%;
    }

    <form class="services_form">
        <div class="accomButton">
        <input type="checkbox" id="accomButton"></input>
        <label for="accomButton" id="accomLabel"></label>
        </div>
        <div class="button">
        <input type="checkbox" id="foo"></input>
        <label for"foo" id="fooBar"></label>
        </div>
    </form>

wrong syntax in "<label for"foo" id="fooBar"></label>" - should be "<label for="foo" id="fooBar"></label>" — Ales Trunda
– Ales Trunda, Commented Nov 10, 2016 at 19:06
What a silly mistake, well spotted. Thank you! That fixed the other button being unresponsive — lumpofiron
– lumpofiron, Commented Nov 10, 2016 at 19:16

paolobasso · Accepted Answer · 2016-11-10 19:05:46Z

1

You need to use background: url("button1.png") no-repeat; not in #accomButton but in #accomLabel as you do for #fooBar.

answered Nov 10, 2016 at 19:05

paolobasso

2,01814 silver badges26 bronze badges

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

Collectives™ on Stack Overflow

Using different images for checkboxes in CSS

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related