html - 单击时复选框按钮不起作用
问题描述
我正在尝试提供一个复选框按钮。即使显示了按钮框和复选标记,它也不起作用(点击时不会取消选中)。有人可以解决这个问题。我是 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;
}
```
解决方案
label
必须id
在其属性中提供受控元素for
。
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>
推荐阅读
- powershell - Powershell Get-Mailbox 循环
- css - 你能清除一个 CSS 宽度属性,以便它使用“宽度”HTML 属性吗?
- python - 具有相同类属性的表抓取
- c# - 如何使用文本框和两个 gridview 项目进行计算?
- php - 如何在 laravel 中使用 cviebrock/laravel-elasticsearch 弹性搜索?
- flutter - 当底部导航被点击时颤振弹出到根目录
- r - 使用 R 查找第一个实例并复制到另一个数据框
- r - 从 data.farme 的行中拆分和子集
- javascript - 获取 TypeError:在严格模式下可能无法访问“调用者”、“被调用者”和“参数”属性
- python - 在 DataFrame 中查找相邻元素(行和列)的平均值