Checkbox hover on the wrong label

Issue

I use bootstrap and I would like to show checkboxes after clicking on an accordion.

The first checkbox is correctly displayed, but when I click to get the checkboxes inside the accordion, I don't get the expected display (it would be like the first checkbox). I don't understand why.

To resume, my problems are : When I click on the label of the child category, it is the checkbox of the parent category that is checked! And the checkbox of the child category does not appear.

html

<div class="container">
<div class="accordion-item position-relative row">
  <div class="col-6 container-checkboxes">
    <label class="form-check-label" for="checkbox">
      <input class="form-check-input" type="checkbox" value="" id="checkbox">
      <span class="checkmark"></span>
      Catégorie 1
    </label>
  </div>
  <div class="col-6">
    <div class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapse" aria-expanded="true" aria-controls="collapse"></div>
  </div>
  <div id="collapse" class="accordion-collapse collapse" aria-labelledby="heading" data-bs-parent="#accordionFilter">
    <div class="accordion-body">
      <div class="container-checkboxes">
        <label class="form-check-label" for="checkbox-sub1">
          <input class="form-check-input" type="checkbox" value="" id="checkbox-sub1">
          <span class="checkmark"></span>
          Sous catégorie 1
        </label>
      </div>
    </div>
  </div>
</div>
</div>

scss

.accordion {
  .accordion-item {
    background: none;
    border: none;
  }
  .accordion-button {
    background: none;
    padding: 0.4rem 0 0 0;
    &::after {
      height: 1rem;
      width: 1rem;
    }
    &:not(.collapsed)::after {
      background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='%23333' xmlns='http://www.w3.org/2000/svg'%3e%3cpath fill-rule='evenodd' d='M0 8a1 1 0 0 1 1-1h14a1 1 0 1 1 0 2H1a1 1 0 0 1-1-1z' clip-rule='evenodd'/%3e%3c/svg%3e");
    }
    &:not(.collapsed) {
      box-shadow: none;
    }
  }
}


.container-checkboxes {
  .form-check-label {
    padding-left: 2rem;
    input {
      cursor: pointer;
      height: 0;
      opacity: 0;
      position: absolute;
      width: 0;
    }
    .checkmark {
      border: 1px solid #9b9b9b;
      height: 21px;
      left: 0;
      position: absolute;
      top: 0;
      width: 21px;
      &:after {
        border: solid white;
        border-width: 0 3px 3px 0;
        content: "";
        display: none;
        height: 0.8rem;
        left: 6px;
        position: absolute;
        top: 3px;
        transform: rotate(45deg);
        width: 0.4rem;
      }
    }
    &:hover input + .checkmark {
      background-color: #ccc;
    }

    input:checked + .checkmark {
      background-color: green;
      border: none;
    }

    input:checked + .checkmark:after {
      display: block;
    }
  }
}

```scss

My code is also here : https://codepen.io/zazzou/pen/bGaBoXa

Thanks for help

Solution

Just add e.g. position: relative to the absolutely positioned checkboxes parent .form-check-label.

Otherwise the element with position: absolute breaks out of the parent to the next element with position set.

.container-checkboxes {
  .form-check-label {
    // ...
    position: relative;
    // ...
  }
}

You could also use another value for position for the parent. It's just important that position is set.

Full demo:

/* Note: Transformed to CSS since Stackoverflow does not support SCSS. It's 1:1 your code. Just with position: relative added. See comment. */
.accordion .accordion-item {
  background: none;
  border: none;
}
.accordion .accordion-button {
  background: none;
  padding: 0.4rem 0 0 0;
}
.accordion .accordion-button::after {
  height: 1rem;
  width: 1rem;
}
.accordion .accordion-button:not(.collapsed)::after {
  background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='%23333' xmlns='http://www.w3.org/2000/svg'%3e%3cpath fill-rule='evenodd' d='M0 8a1 1 0 0 1 1-1h14a1 1 0 1 1 0 2H1a1 1 0 0 1-1-1z' clip-rule='evenodd'/%3e%3c/svg%3e");
}
.accordion .accordion-button:not(.collapsed) {
  box-shadow: none;
}

.container-checkboxes .form-check-label {
  padding-left: 2rem;
  position: relative; /* <- add this here. */
}
.container-checkboxes .form-check-label input {
  cursor: pointer;
  height: 0;
  opacity: 0;
  position: absolute;
  width: 0;
}
.container-checkboxes .form-check-label .checkmark {
  border: 1px solid #9b9b9b;
  height: 21px;
  left: 0;
  position: absolute;
  top: 0;
  width: 21px;
}
.container-checkboxes .form-check-label .checkmark:after {
  border: solid white;
  border-width: 0 3px 3px 0;
  content: "";
  display: none;
  height: 0.8rem;
  left: 6px;
  position: absolute;
  top: 3px;
  transform: rotate(45deg);
  width: 0.4rem;
}
.container-checkboxes .form-check-label:hover input + .checkmark {
  background-color: #ccc;
}
.container-checkboxes .form-check-label input:checked + .checkmark {
  background-color: green;
  border: none;
}
.container-checkboxes .form-check-label input:checked + .checkmark:after {
  display: block;
}

  <div class="container">
  <div class="accordion-item position-relative row">
    <div class="col-6 container-checkboxes">
      <label class="form-check-label" for="checkbox">
        <input class="form-check-input" type="checkbox" value="" id="checkbox">
        <span class="checkmark"></span>
        Catégorie 1
      </label>
    </div>
    <div class="col-6">
      <div class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapse" aria-expanded="true" aria-controls="collapse"></div>
    </div>
    <div id="collapse" class="accordion-collapse collapse" aria-labelledby="heading" data-bs-parent="#accordionFilter">
      <div class="accordion-body">
        <div class="container-checkboxes">
          <label class="form-check-label" for="checkbox-sub1">
            <input class="form-check-input" type="checkbox" value="" id="checkbox-sub1">
            <span class="checkmark"></span>
            Sous catégorie 1
          </label>
        </div>
      </div>
    </div>
  </div>
  </div>
  
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.0.2/css/bootstrap.min.css"/>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.1.3/js/bootstrap.min.js"></script>

Answered By - Dominik