无法在 chrome 上的移动视图中取消选中复选框输入 [重复]答案

【问题标题】：Checkbox input can't be unchecked in mobile view on chrome [duplicate]无法在 chrome 上的移动视图中取消选中复选框输入 [重复]
【发布时间】：2021-11-17 14:39:13
【问题描述】：

一旦我选中复选标记框，当我在 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: "\2713";
    font-size: 22px;
    color: black;
    line-height: 7px;
}

 <div>
                <input type="checkbox" name="check">
                <label id="following" for="check">Following</label>
            </div>

【问题讨论】：

好像太简单了，但是checkbox有个display: none，看不到是正常的……

标签： html css input checkmark

【解决方案1】：

为您的复选框添加一个 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: "\2713";
    font-size: 22px;
    color: black;
    line-height: 7px;
}

【讨论】：

【解决方案2】：

我尝试复制您的问题，当我更新您的 html 以在您的复选框中包含 id 时，它对我有用。

   <div>
       <input type="checkbox" name="check" id="check">
        <label id="following" for="check">Following</label>
   </div>

for 属性以 ID 为目标。

【讨论】：

【解决方案3】：

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: "\2713";
    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>

【讨论】：