How to target an element using input type checkbox

user_18529574 0
Viewed 92

I have a dropdown type list that will get hidden after specific device width and by default, the dropdown box will be visible so the user is not able to collapse it.

The default state for input is also hidden.

Suppose the device width is 804px, and the dropdown gets hidden and input gets visible. By clicking the input the user can see the contents of the dropdown.

But for some reason, I'm unable to target the dropdown box using the input field.

input[type="checkbox"]:checked~.team-lists {
  display: flex;
  height: 430px;
}
<div class="hireDevs">
  <div class="headers">
    <h2>Hire Developer Team</h2>
    <label for="team-lists">
      <input type="checkbox" class="add-lists" id="team-lists" hidden>
      <i class="ri-add-fill"></i>
    </label>
  </div>
  <div class="team-lists">
    <a href="#">Android App Developers</a>
    <a href="#">iOS App Developers</a>
    <a href="#">Flutter App Developers</a>
  </div>
</div>

css html javascript
2 Answers

Your selector input[type="checkbox"]:checked~.team-lists targets any elements that have a CSS class of team-lists that are siblings (~) of an input with type checkbox which is in checked state. This does not match your HTML structure; for this to work both the checkbox and the target div would have to have the exact same parent element, with the div coming after the checkbox. Given your current approach, that would mean you'd have to put the div inside the label (which would be a very bad approach).

Up until recently, you can only select forward (subsequent siblings)/downward (descendants) in CSS, which means once your selector has reached your checkbox, there is no way to continue your selector so you can reach your div.team-lists.

To solve this age-old developer issue, CSS has introduced the very new :has() pseudo class, which so far is only supported in Safari, and in Chrome (starting from v 101) behind the experimental features flag.

Please note that for simplicity's sake I have removed your icon (which didn't work in your snippet either), and replaced it by the letters CB.

.hireDevs:has(input[type="checkbox"]:checked) .team-lists {
  display: flex;
  height: 430px;
}
<div class="hireDevs">
  <div class="headers">
    <h2>Hire Developer Team</h2>
    <label for="team-lists">
      <input type="checkbox" class="add-lists" id="team-lists" hidden>
      CB
    </label>
  </div>
  <div class="team-lists" hidden>
    <a href="#">Android App Developers</a>
    <a href="#">iOS App Developers</a>
    <a href="#">Flutter App Developers</a>
  </div>
</div>

So for your specific use-case, if :has() is not yet an option, you'll have to resort to JavaScript:

document
  .getElementById('team-lists')
  .addEventListener('change', function(event) {
    document.querySelector('.team-lists').hidden = !this.checked;
  });
.team-lists:not([hidden]) {
  display: flex;
  height: 430px;
}
<div class="hireDevs">
  <div class="headers">
    <h2>Hire Developer Team</h2>
    <label for="team-lists">
      <input type="checkbox" class="add-lists" id="team-lists" hidden>
      CB
    </label>
  </div>
  <div class="team-lists" hidden>
    <a href="#">Android App Developers</a>
    <a href="#">iOS App Developers</a>
    <a href="#">Flutter App Developers</a>
  </div>
</div>

user_37443040

You can target an input tag like this :

const input = document.querySelector("input[type=checkbox]");

const input = document.querySelector("input[type=checkbox]");
console.log(input);
input[type="checkbox"]:checked .team-lists {
  display: flex;
  height: 430px;
}
<div class="hireDevs">
  <div class="headers">
    <h2>Hire Developer Team</h2>
    <label for="team-lists">
      <input type="checkbox" class="add-lists" id="team-lists" hidden>
      <i class="ri-add-fill"></i>
    </label>
  </div>
  <div class="team-lists">
    <a href="#">Android App Developers</a>
    <a href="#">iOS App Developers</a>
    <a href="#">Flutter App Developers</a>
  </div>
</div>

user_151162070
Related