在 chrome 的移动视图中无法取消选中复选框输入
Checkbox input can't be unchecked in mobile view on chrome
选中复选标记框后,当我在 chrome 中使用移动视图时,我无法取消选中它,当我切换到桌面时,复选标记甚至不会保留,我无法选中根本没有盒子。
我错过了什么?
代码:
input[type=checkbox] {
display: none;
}
#following {
font-family: "Comic Sans MS", "Comic Sans", cursiveic;
text-align: center;
display: inline-block;
color: black;
cursor: pointer;
position: relative;
padding-left: 30px;
margin: -10px 10px;
top: -10px;
font-size: 15px;
}
label:before {
line-height: 20px;
content: "";
display: inline-block;
width: 12px;
height: 12px;
margin-right: 10px;
position: absolute;
left: 10px;
top: 5px;
border: 1px solid black;
}
input[type=checkbox]:checked + label:before,
label:hover:before {
content: "13";
font-size: 22px;
color: black;
line-height: 7px;
}
<div>
<input type="checkbox" name="check">
<label id="following" for="check">Following</label>
</div>
我试图重现你的问题,当我更新你的 html 以包含一个 id
用于你的复选框时,它对我有用。
<div>
<input type="checkbox" name="check" id="check">
<label id="following" for="check">Following</label>
</div>
for
属性以 ID 为目标。
为您的复选框添加一个 id 属性。标签 for
仅适用于输入 id
<div>
<input type="checkbox" name="check" id="check">
<label id="following" for="check">Following</label>
</div>
从 css 中删除 label:hover:before
。否则它不会取消选中移动视图中的点击
input[type=checkbox]:checked + label:before{
content: "13";
font-size: 22px;
color: black;
line-height: 7px;
}
input[type=checkbox] {
display: none;
}
#following {
font-family: "Comic Sans MS", "Comic Sans", cursiveic;
text-align: center;
display: inline-block;
color: black;
cursor: pointer;
position: relative;
padding-left: 30px;
margin: -10px 10px;
top: -10px;
font-size: 15px;
}
label:before {
line-height: 20px;
content: "";
display: inline-block;
width: 12px;
height: 12px;
margin-right: 10px;
position: absolute;
left: 10px;
top: 5px;
border: 1px solid black;
}
input[type=checkbox]:checked + label:before,
label:hover:before {
content: "13";
font-size: 22px;
color: black;
line-height: 7px;
}
input[type=checkbox]:not(:checked) + label:before {
content: "";
}
<div>
<input type="checkbox" id="check" name="check">
<label id="following" for="check">Following</label>
</div>
选中复选标记框后,当我在 chrome 中使用移动视图时,我无法取消选中它,当我切换到桌面时,复选标记甚至不会保留,我无法选中根本没有盒子。
我错过了什么?
代码:
input[type=checkbox] {
display: none;
}
#following {
font-family: "Comic Sans MS", "Comic Sans", cursiveic;
text-align: center;
display: inline-block;
color: black;
cursor: pointer;
position: relative;
padding-left: 30px;
margin: -10px 10px;
top: -10px;
font-size: 15px;
}
label:before {
line-height: 20px;
content: "";
display: inline-block;
width: 12px;
height: 12px;
margin-right: 10px;
position: absolute;
left: 10px;
top: 5px;
border: 1px solid black;
}
input[type=checkbox]:checked + label:before,
label:hover:before {
content: "13";
font-size: 22px;
color: black;
line-height: 7px;
}
<div>
<input type="checkbox" name="check">
<label id="following" for="check">Following</label>
</div>
我试图重现你的问题,当我更新你的 html 以包含一个 id
用于你的复选框时,它对我有用。
<div>
<input type="checkbox" name="check" id="check">
<label id="following" for="check">Following</label>
</div>
for
属性以 ID 为目标。
为您的复选框添加一个 id 属性。标签 for
仅适用于输入 id
<div>
<input type="checkbox" name="check" id="check">
<label id="following" for="check">Following</label>
</div>
从 css 中删除 label:hover:before
。否则它不会取消选中移动视图中的点击
input[type=checkbox]:checked + label:before{
content: "13";
font-size: 22px;
color: black;
line-height: 7px;
}
input[type=checkbox] {
display: none;
}
#following {
font-family: "Comic Sans MS", "Comic Sans", cursiveic;
text-align: center;
display: inline-block;
color: black;
cursor: pointer;
position: relative;
padding-left: 30px;
margin: -10px 10px;
top: -10px;
font-size: 15px;
}
label:before {
line-height: 20px;
content: "";
display: inline-block;
width: 12px;
height: 12px;
margin-right: 10px;
position: absolute;
left: 10px;
top: 5px;
border: 1px solid black;
}
input[type=checkbox]:checked + label:before,
label:hover:before {
content: "13";
font-size: 22px;
color: black;
line-height: 7px;
}
input[type=checkbox]:not(:checked) + label:before {
content: "";
}
<div>
<input type="checkbox" id="check" name="check">
<label id="following" for="check">Following</label>
</div>