0

I have got three div blocks with three checkboxes and I would like to change the div blocks background color when I click on each checkbox.

When I try this:

<style type="text/css">

.calendar-content {
    float: left;
    width: 100%;
    min-height: 112px;
    border: 1px solid #ccc;
    position: relative;
    display: block;
    margin-top: -1px;
}

.checkbox input[type="checkbox"] {
    margin-top: 1px;
    width: 20px;
    height: 20px;
    margin-left: -24px;
    padding-left: 24px;
}


.checkbox:checked ~ .calendar-content {
  background: #CCC;
}
</style>



<div class="calendar-content checkbox">
    <input type="checkbox" id="select_campaign" style="margin-left: 20px; margin-top: 28px; float: left;">
</div>

<div class="calendar-content checkbox">
    <input type="checkbox" id="select_campaign" style="margin-left: 20px; margin-top: 28px; float: left;">
</div>

<div class="calendar-content checkbox">
    <input type="checkbox" id="select_campaign" style="margin-left: 20px; margin-top: 28px; float: left;">
</div>

It will not change the color for each div block when I click on each checkbox. I dont know why it wont let me to change the div blocks color so I guess there is something wrong with my code.

Jsfiddle: http://jsfiddle.net/sx5p4j3k/

Can you please show me an example how I could use css to change the color for the div blocks when I click on each checkbox?

Thank you.

Robert Jones
  • 390
  • 3
  • 18
  • the duplicate deal with hover but you can easily used checked instead or at least you will get some idea of workarounds – Temani Afif Dec 29 '18 at 19:24
  • @TemaniAfif Thank you for your advice, do you know what I should use with checked to change the color for the div? I have tried to use `input[type="checkbox"]:checked + .calendar-content { background: #CCC; }` but it wont change the color. Any idea? – Robert Jones Dec 29 '18 at 19:27
  • I have also tried `.checkbox input[type="checkbox"]:checked + div { background: #CCC; }`, it still dont do anything. – Robert Jones Dec 29 '18 at 19:30
  • there is no way to target a parent element, you need to check the duplicates in order to find some workarounds. Basically what you want to do isn't possible with direct CSS, you need to hack it. – Temani Afif Dec 29 '18 at 19:40
  • Well I have try it to hack it but it didn't work. I have looking into google and it say that css will work. I tried it but it still didn't work. What I am not happy is you havent been helping me to resolve it. – Robert Jones Dec 29 '18 at 20:03

0 Answers0