input: checked does not change border as requested in css

Question

input: checked does not change border as requested in css

Navigation

#1 by (7 votes)

1

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>

css

asked by anonymous 27.12.2018 / 00:17

1 answer

How to pass a struct vector by reference parameter? About the structure of the 'sorted' function, how does it work?

score 7 · Accepted Answer

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

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

This will select the <li> element that is adjacent to the <input> element that is selected. In its HTML structure, the <li> element 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 functionality 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>