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

Question

我使用引导程序，我想在点击手风琴后显示复选框。

第一个复选框是正确显示的，但当我单击以将复选框放在手风琴中时，我没有得到预期的显示(它将与第一个复选盒一样(。我不明白为什么。

我的问题是：当我单击子类别的标签时，选中的是父类别的复选框！并且不会显示子类别的复选框。

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 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>