Individual Checkbox Image Replacement

Question

I am looking to try something like in the below link, however I want different images for each checkbox. Is there any way to do this? I have tried setting different classes for each item and just adding the class to the checkbox, but that doesnt seem to work...the default checkboxes just remain the same.

MY ATTEMPT: https://jsfiddle.net/9qjj7012/

<div class="AccordionPanel" id="acc-step-3">
    <div class="AccordionPanelTab">Step Three - Equipment Package</div>
    <div class="AccordionPanelContent">
        <div class="">
            <input type="checkbox" name="equipment" value="speakers" id="equipment_0" class="speaker">
            <input type="checkbox" name="equipment" value="subwoofer" id="equipment_1" class="subwoofer">
            <input type="checkbox" name="equipment" value="smoke-machine" id="equipment_2" class="smokemachine">
            <input type="checkbox" name="equipment" value="moving-head" id="equipment_3" class="movinghead">
        </div>

        <div class="form-gap"></div>

        <input name="previous" id="acc-step-prev-3" type="button" class="form-btn form-prev" value="Previous">
        <input name="next" id="acc-step-next-3" type="button" class="form-btn form-next" value="Next"><br>
        <input name="reset" type="reset" class="form-btn form-reset" value="Reset">
    </div>              
</div>

EXAMPLE OF THE RESULT I WOULD LIKE: http://codepen.io/jointmedias/pen/HqCJe (Except with individual images for each checkbox)

NEW JSFIDDLE: https://jsfiddle.net/9qjj7012/

score 1 · Answer 1 · answered Mar 05 '16 at 09:39

1

What you're doing wrong, is that you're assigning a class to the checkbox, while the CSS rules in the example you refer to don't select the check box, they select the label. The checkbox is actually hidden, it's the label you are seeing.

Check this out: http://codepen.io/DavidvanDriessche/pen/xVwJgd

In this example the labels have different classes and the css rules act upon that as follows:

For all checkboxes:

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

For all labels with class background1 that are following a checkbox:

input[type=checkbox] + label.background1 {
  background: url("http://www.corporatecomplianceinsights.com/wp-content/uploads/2013/06/Facebook-thumbs-up.jpg") no-repeat;
}

For all labels with class background2 that are following a checkbox

input[type=checkbox] + label.background2 {
  background: url("http://www.clker.com/cliparts/e/2/a/d/1206574733930851359Ryan_Taylor_Green_Tick.svg.med.png") no-repeat;
}

For all labels with a class attribute that begins with "background" and are following a checkbox:

input[type=checkbox] + label[class*="background"] {
  background-size: 50%;
  height: 250px;
  width: 250px;
  display: inline-block;
  padding: 0 0 0 0px;
}

The only reason I'm working with that last rule is that it allows you to put all common formatting code into one CSS rule and you don't have to repeat it for each of the rules that target a specific background class, but that's a nicety you could forego if you want.

answered Mar 05 '16 at 09:39

David van Driessche

6,602
2
28
41

Hey David, your answer wasn't here when I started writing mine. I am sorry didn't mean to repeat the same idea :( – CreativeCreate Mar 05 '16 at 09:57
Hi David, Thank you for your reply! I have also read CreativeCreate's reply and noticed they are the same. I will mark your reply as correct and as the answer :) I am very thankful that you have taken the time to explain your answer and what you have done to make the checkboxes work :) – Anake.me Mar 05 '16 at 10:19
No worries, CreativeCreate - it's always helpful for people to have things explained in multiple ways! – David van Driessche Mar 05 '16 at 10:29
I have added my new CSS fields, however when I go to "check" the boxes, I have implemented the opacity to rise from 0.5 to 1, but that isnt working? – Anake.me Mar 05 '16 at 10:55
Please see the "NEW JSFIDDLE" in my original post. (I also added the images I plan to use for the project.) – Anake.me Mar 05 '16 at 11:01
Your fiddle has nothing to do with the solutions suggested here any more. Your HTML doesn't even have labels anymore, there's no way it's going to work that way. Please read both answers you've received and the explanation about the checkbox not supporting a background image... – David van Driessche Mar 05 '16 at 12:47

score 1 · Answer 2 · answered Mar 05 '16 at 09:51

So far checkbox does not support background attribute. Luckily checkbox label also work as a clickable area for the assigned (for=checkboxId) checkbox. So the idea is to make a fake checkbox using label element and then change it's background value when checked.

input { display:none; } /* hide the checkbox. Label is our clickable area */
label {                 /* define the clickable area */
    height: 150px;      
    width: 150px;
    display: inline-block;
    border: 2px solid;
}    

/* set background image of the clicked area */
input[id=speakers]:checked + label {background: url('speakers.jpg');}
input[id=subwoofer]:checked + label {background: url('subwoofer.jpg');}
input[id=smoke-machine]:checked + label {background: url('smachine.jpg'); 
}

See Demo

Thank you for your reply CreativeCreate! I have marked up your answer, however have acknowledged David's reply as the answer. (Even though they are both very much the same idea.) Yours does seem much easier to understand though, so I will probably use your way :) Thank you for your help! — Anake.me, Mar 05 '16 at 10:21

Individual Checkbox Image Replacement

2 Answers2