Changing CSS with the checkbox check

Question

I tried many ways to change the color of the border of my image when the checkbox is checked and I didn't find a solution. I start wondering if it's possible.

.thumbs { 
 list-style:none; 
 margin:0; 
 padding:0.3em 0; 
 text-align:center; 
 color:#fff; 
}
 
.thumbs li  {
 position:relative;
 display:inline-block;
    margin:0.2em;
 border:0.30em solid #000000 ;
 border-radius:0.3em;
}
 
.thumbs li:hover { border-color: #59b359; }
 
input[type=checkbox]:checked + .thumbs li { border-color: #ff0000; }

<form  id="formdelete">
 
 <ul class="thumbs">
 
 <li class="img">
   <label for="SNAP_CH01.jpg">
   <img src="SNAP_CH01.jpg" title="CH1"> 
            
   <input type="checkbox" name="todelete[]" value="SNAP_CH01" id="SNAP_CH01.jpg"> 
 </li>
 
 <li class="img">
   <label for="SNAP_CH02.jpg">
   <img src="SNAP_CH02.jpg" title="CH2"> 
            </label> 
   <input type="checkbox" name="todelete[]" value="SNAP_CH02" id="SNAP_CH02.jpg"> 
 </li>

 <li class="img">
   <label for="SNAP_CH03.jpg">
   <img src="SNAP_CH03.jpg" title="CH3"> 
            </label> 
   <input type="checkbox" name="todelete[]" value="SNAP_CH03" id="SNAP_CH03.jpg">
 </li>
 
</form>

The border should be red when the checkbox is checked

EDIT :

I find a solution using the link :

I have to change the order of the checkbox but it's work fine :

    <ul class="thumbs">

<li class="img">
        <input type="checkbox" name="todelete[]" value="SNAP_CH01" id="SNAP_CH01.jpg">      
        <label for="SNAP_CH01.jpg">
        <img src="SNAP_CH01.jpg" title="CH1">
        </label>

</li>

label > img {
    display: block;
    border: 3px solid #000000 ;
}

input[type=checkbox]:checked + label > img { border: 3px #FF0000 solid ;}

Rachel Gellen : It's works but I have to change the order of the label, and the checkbox is no longer can be check with the img. DCR : yes, why not. Pur javascript — Jannette, May 14 '19 at 19:18

score 2 · Answer 1 · answered May 14 '19 at 18:06

So, the adjacent sibling selector + https://developer.mozilla.org/en-US/docs/Web/CSS/Adjacent_sibling_combinator will target the element immediately AFTER the element being referenced.

In your code, input[type=checkbox]:checked + .thumbs li it is looking for a class for thumbs immediately after the checkbox. In this case, .thumbs is the name of the (grand) parent UL item.

The most important letter in CSS is the C -- Cascading. The styles move down the DOM tree, you will need creative ways to affect something above.

Changing CSS with the checkbox check

1 Answers1