Chrome移动端自定义Checkbox无法取消勾选 桌面端选中失效问题求助

以下是你代码中存在的疏漏点：

• 核心问题：<input> 缺少与 label 的 for 属性匹配的 id 属性。label 的 for 属性值关联的是目标表单元素的id，不是name，你当前代码里input只有name="check"，没有id="check"，导致label和复选框没有正确绑定，点击label无法触发复选框状态切换，就会出现点击无效、状态不保留的异常。
• 布局问题：label 元素的负margin和负top定位会导致点击区域偏移，移动端触摸时容易触发不到有效交互区域，出现勾选后无法取消的问题。
• 样式逻辑问题：你把:checked状态和:hover状态写在同一个选择器里，会导致鼠标悬浮时不管有没有勾选都显示对勾，视觉上和实际勾选状态不一致，容易误解操作结果。
• 笔误：font-family 里的 cursiveic 是拼写错误，正确值是 cursive。

HTML 代码 #

<div>
  <!-- 新增id="check"，和label的for属性关联 -->
  <input type="checkbox" name="check" id="check">
  <label id="following" for="check">Following</label>
</div>

CSS 代码 #

input[type=checkbox] {
    display: none;
}
#following {
    font-family: "Comic Sans MS", "Comic Sans", cursive;
    text-align: center;  
    display: inline-block;
    color: black;
    cursor: pointer;
    position: relative;
    padding-left: 30px;
    /* 去掉不合理的负定位，避免点击区域偏移 */
    margin: 0 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 {
    content: "\2713";
    font-size: 22px;
    color: black;
    line-height: 7px;
}
label:hover:before {
    /* 可自定义悬浮效果，不要和勾选状态完全一致 */
    border-color: #666;
}

内容的提问来源于stack exchange，提问作者Coding6969