復選框懸停在錯誤的標簽上

我使用引導程式，我想在點擊手風琴后顯示復選框。

第一個復選框已正確顯示，但是當我單擊以獲取手風琴內的復選框時，我沒有得到預期的顯示（就像第一個復選框一樣）。我不明白為什么。

繼續，我的問題是：當我點擊子類別的標簽時，它是被選中的父類別的復選框！并且子類別的復選框沒有出現。

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,");
    }
    &: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

感謝幫助

uj5u.com熱心網友回復：

只需將例如添加position: relative到絕對定位的復選框 parent .form-check-label。

否則，元素position: absolute會從父元素中跳出到下一個具有位置集的元素。

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

您還可以為父級使用另一個值position。位置確定很重要。

完整演示：

顯示代碼片段

/* 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,");
}
.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>

標籤：html css 引导程序 4

上一篇：JQuery不讀取用戶輸入

下一篇：如何修復未顯示的粘性社交圖示？