复选框按钮在单击时不起作用
Check box button not functioning on click
我正在尝试提供一个复选框按钮。即使显示了按钮框和复选标记,它也不起作用(点击时没有取消选中)。任何人都可以解决这个问题。我是 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
必须在其属性 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>
我正在尝试提供一个复选框按钮。即使显示了按钮框和复选标记,它也不起作用(点击时没有取消选中)。任何人都可以解决这个问题。我是 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
必须在其属性 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>