input:checked does not change border as prompted in css

Asked

Viewed 98 times

0

I am 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 css lines and no one gave to put 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 for both the outside border and the image border to be green by clicking on the image (checkbox) and not working I leave here to download 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>

css

  • Is the first CSS not good for anything? Why is it not part of the second code?

  • 1

    With input:checked + li you are selecting the element <li> adjacent to the input:checked, but in its case the <li> is the father of input. In CSS, we currently have no way to select parent elements from the child.

  • then it means I can’t get this to work ??

1 answer

7


You are improperly using CSS selectors according to your HTML structure.

input:checked + li {
    border: solid rgba(37,205,61,1.00);
}

This will select the element <li> which is adjacent to the posterior element <input> which is selected. In its HTML structure, the element <li> is the parent of the field and therefore will never work. In CSS, there is currently no way to select the parent element from the child element.

What you can do is take advantage of the CSS adjacency selector and change the structure of your HTML by leaving the image adjacent to the field.

.option {
  margin: 10px;
  float: left;
}

.option__input {
  display: none;
}

.option__image {
  padding: 3px;
  border: 1px solid lightgray;
  opacity: 0.5;
  cursor: pointer;
  transition: all .2s;
}

.option__image:hover {
  border-color: blue;
  opacity: 1.0;
}

.option__input:checked + .option__image {
  border-color: green;
  opacity: 1.0;
}
<div class="option">
  <label>
    <input type="checkbox" name="field[]" value="1" class="option__input">
    <img src="https://via.placeholder.com/150" class="option__image">
  </label>
</div>

<div class="option">
  <label>
    <input type="checkbox" name="field[]" value="1" class="option__input">
    <img src="https://via.placeholder.com/150" class="option__image">
  </label>
</div>

<div class="option">
  <label>
    <input type="checkbox" name="field[]" value="1" class="option__input">
    <img src="https://via.placeholder.com/150" class="option__image">
  </label>
</div>

Browser other questions tagged css

You are not signed in. Login or sign up in order to post.