I'm trying to change the border of an image when the input of a checkbox is selected, or my css does not leave or something is blocking. Following the logic I tested these lines of css and none gave for the border to change.
input:checked + li {
border: solid rgba(37,205,61,1.00);
}
input:checked + #field_1_5 {
border: solid rgba(37,205,61,1.00);
}
input:checked + li .list {
border: solid rgba(37,205,61,1.00);
}
input:checked + .list {
border: solid rgba(37,205,61,1.00);
}
What I want is that both the border and the border of the image are green by clicking on the image (checkbox) and is not working I leave here to unsubscribe my html and css.
}
.list img {
border: solid rgba(223, 223, 223, 0.99);
}
.list {
list-style-type: none;
margin-left: 150px;
padding-left: 0px;
display: inline-block;
border: solid rgba(223, 223, 223, 0.99);
text-align: center;
width: 305px;
background-color: rgba(237, 237, 237, 1.00);
}
ul {
list-style-type: none;
}
#field_1_5 {
display: none;
/* visibility: hidden works too */
}
<ul>
<li class="list">
<label class="" for="field_1_5">
<span class="">
<img src="https://image.freepik.com/free-vector/vector-illustration-of-a-mountain-landscape_1441-77.jpg"alt="imagem montanha" width="300" title="montanha">
</span>
<br>
<input type="checkbox" id="field_1_5" name="check1[]" value="Montras Digitais">
<span class="">imagem montanha</span>
</label>
</li>
</ul>