user4208390 user4208390 - 24 days ago 17
CSS Question

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>




Answer

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

Comments