复选框悬停在错误的标签上

Question

我使用 bootstrap，我想在点击手风琴后显示复选框。

第一个复选框显示正确，但是当我单击以获取手风琴内部的复选框时，我没有得到预期的显示（就像第一个复选框一样）。我不明白为什么。

要恢复，我的问题是：当我点击子类别的标签时，勾选的是父类别的复选框！并且子类别的复选框没有出现。

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

我的代码也在这里：https://codepen.io/zazzou/pen/bGaBoXa

感谢帮助

Answer 1

只需添加例如position: relative 到绝对定位的复选框父 .form-check-label.

否则 position: absolute 的元素会跳出父元素到下一个设置了位置的元素。

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

您还可以为 position 父项使用另一个值。设置位置很重要。

完整演示：

/* Note: Transformed to CSS since Whosebug 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>

复选框悬停在错误的标签上

Checkbox hover on the wrong label

html

css

bootstrap-4