复选框按钮在单击时不起作用

Question

我正在尝试提供一个复选框按钮。即使显示了按钮框和复选标记，它也不起作用(点击时没有取消选中(。有人能解决这个问题吗。我是HTML、CSS的新手。

```
<div class="col-sm-1 accept-box ">
<input
class=""
type="checkbox"
name="accept"
value="accepted"
checked
/><label for=""></label>
</div>
input[type='checkbox'] + label {
font-family: Proxima Nova,Open Sans,Corbel,Arial,sans-serif;
font-weight: 400;
cursor: pointer;
padding: 0;
position: relative;
height: 1rem !important;
width: 1rem !important;
}
input[type='checkbox']:checked + label::after {
background: #FFF;
border: 1px solid var(--link-default);
border-width: 0 0.125rem 0.125rem 0;
content: '';
height: 0.875rem !important;
left: 0.35rem !important;
position: absolute;
top: 0;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
width: 0.5rem !important;
position: absolute !important;
}
```       

Answer 1

label必须在其属性for中提供受控元素的id。

div {
/* optional styling. Just to show label */
background-color: #000;
}
input[type='checkbox']+label {
font-family: Proxima Nova, Open Sans, Corbel, Arial, sans-serif;
font-weight: 400;
cursor: pointer;
padding: 0;
position: relative;
height: 1rem !important;
width: 1rem !important;
}
input[type='checkbox']:checked+label::after {
background: #FFF;
border: 1px solid var(--link-default);
border-width: 0 0.125rem 0.125rem 0;
content: '';
height: 0.875rem !important;
left: 0.35rem !important;
position: absolute;
top: 0;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
width: 0.5rem !important;
}

<div class="col-sm-1 accept-box">
<input id="accept" type="checkbox" name="accept" value="accepted" checked>
<label for="accept"></label>
</div>