jeudi 14 octobre 2021

Changing the Style of a specific element by Checkbox:Checked

I am using a checkbox as a way to modify the other element's style. Is it possible for a checkbox to affect other classes/elements of the website.

I have a sample html code below, instead of changing label element, is it possible to change the styling of the first div instead.

ul li {
  display: inline-block;
}

ul li input[type="checkbox"]:checked+label {
  border: 2px solid gray;
  background-color: gray;
  color: #fff;
  transition: all .2s;
}

ul li {
  padding: 20px;
  margin: 20px;
}

ul li input[type="checkbox"] {
  display: absolute;
}

ul li input[type="checkbox"] {
  position: absolute;
  opacity: 0;
}

ul li label {
  padding: 20px;
  cursor: pointer;
}
<div class="modify-box">
  BOX TO CHANGED
</div>
<ul>
  <li>
    <input type="checkbox" id="vehicle1" name="vehicle1" value="Bike">
    <label for="vehicle1"> Bike</label><br>
  </li>
  <li>
    <input type="checkbox" id="vehicle2" name="vehicle2" value="Car">
    <label for="vehicle2"> Car</label><br>
  </li>
  <li>
    <input type="checkbox" id="vehicle3" name="vehicle3" value="Boat">
    <label for="vehicle3"> Boat</label><br>
  </li>
</ul>



Aucun commentaire:

Enregistrer un commentaire