复选框隐藏后点击失效需用 position: absolute + opacity: 0 隐藏 input，保留可点击性；确保 input 在 label 内或通过 for 绑定 id；伪元素样式规则须紧跟 :checked 选择器后；label 需设 padding 扩大热区并加 cursor: pointer。
复选框隐藏后点击失效怎么办
直接 display: none 或 visibility: hidden 会让 <input type="checkbox"> 完全失去可交互能力，伪元素再漂亮也点不动。
必须保留原生 input 的可点击区域，只是视觉上藏起来：
- 用
position: absolute+opacity: 0（推荐），既不影响布局流，又保持可聚焦、可点击、支持键盘空格切换 - 避免用
clip: rect(0 0 0 0)，部分旧版 Safari 对 focus 状态处理异常 - 务必给
input加z-index: 1，否则伪元素盖住后点击会落到父容器上
:checked + label 触发样式不生效的常见原因
依赖 :checked 控制伪元素状态时，DOM 结构和选择器顺序稍有偏差就会断链。
关键约束条件：
-
input必须在label内部，或label用for属性精确绑定id（不能靠位置关系猜测） - 伪元素（如
label::before）的样式规则必须写在input:checked + label::before或input:checked ~ label::before后面，CSS 顺序不能错 - 移动端 Safari 对相邻兄弟选择器
+的触发有微小延迟，建议统一用~（通用兄弟）更稳
自定义方框+对勾图标性能与兼容性取舍
用纯 CSS 绘制对勾（border 旋转拼接）看似轻量，但实际在低端安卓机上可能重绘卡顿；用 SVG 图标则要权衡加载时机。
实操建议：
- 对勾图形优先用
background-image: url("data:image/svg+xml,...")内联 SVG，避免额外请求，且缩放不失真 - 不用
transform: rotate()模拟对勾——iOS 微信内置浏览器中，transform在:checked切换瞬间常出现闪动 - 如果需支持 iOS 12 以下，避开
mask-image实现遮罩效果，改用background-clip: text+-webkit-text-fill-color: transparent更稳妥
移动端点击区域太小导致误操作
原生复选框默认点击热区只有 12×12px 左右，手指根本点不准，这是用户“点了没反应”的最大元凶。
必须放大可点击范围，但不能影响布局：
- 给
label设padding: 8px，同时用box-sizing: border-box防止撑开容器 - 不要只放大伪元素尺寸（比如把
::before宽高设成 20px），它不响应点击，真正要扩的是label的内容区 - 在微信 WebView 中，若
label包含文字，建议加cursor: pointer，否则部分机型不显示手型，用户意识不到可点
input 设 position: absolute 就直接套 opacity: 0，结果它还在文档流里占空白，导致下方元素被顶下去——这个坑，调半天才发现。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
