CODEWITHSUNDEEP
htmlcsscheckbox
lumpofiron
lumpofiron

Reputation: 154

Using different images for checkboxes in CSS

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>

Upvotes: 1

Views: 87

Answers (1)

paolobasso
paolobasso

Reputation: 2018

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

Upvotes: 1

Related Questions