正确做法是用 position: absolute; opacity: 0; pointer-events: none 隐藏原生 checkbox，保留其表单功能与可访问性；通过关联 label 的伪元素实现自定义样式，确保结构、选择器与无障碍支持完整。
怎么用 CSS 隐藏原生 checkbox 并套上自定义样式
浏览器对 input[type="checkbox"] 的默认渲染几乎不可直接美化，强行改 border 或 background 没用——它压根不响应这些属性。真正可行的路只有一条：视觉上藏掉原生控件，用紧邻的 label 和伪元素模拟。
常见错误是直接给 input 加 display: none，结果导致表单提交时值丢失（因为被移出渲染树后，很多浏览器会跳过该控件的序列化）。正确做法是用 position: absolute 移出视口，同时保留其在 DOM 中的可访问性和表单参与性。
-
input[type="checkbox"]用position: absolute; opacity: 0; pointer-events: none;隐藏但保功能 -
label必须和input关联（用for属性或包裹结构），否则点击无效 - 自定义勾选效果全靠
label::before/label::after实现，比如画个方框 + 小对勾 - 状态切换依赖
input:checked + label::before这类兄弟选择器，注意 HTML 结构顺序
:checked 伪类为什么没生效？检查这三处
写完样式发现勾选后外观不变，大概率是选择器链断了。CSS 中 :checked 本身不触发重绘，它只是匹配状态，关键在后续规则是否能命中目标元素。
- HTML 中
input和label不是相邻兄弟？那input:checked + label就不成立，得换用input:checked ~ label（后代/通用兄弟）或改结构 -
label上写了display: inline却想用width/height？得先设display: inline-block或block - 用了
label::after画对勾，但忘了设content: ""—— 伪元素没 content 就不渲染，再好看的transform都白搭
移动端点击区域太小，怎么安全放大又不破坏语义
原生 checkbox 点击热区就那么几个像素，手指一点容易误操作。不能单纯放大 input，得放大它绑定的 label 范围，同时确保无障碍支持。
立即学习“前端免费学习笔记（深入）”；
- 给
label设min-height: 44px（iOS 推荐最小触控尺寸），配合display: flex垂直居中文字和图标 - 避免用
padding扩展点击区——如果label内还有其他可交互元素（比如链接），padding 区域会误触发 checkbox - 必须保留
for属性或嵌套结构，不然屏幕阅读器无法把文字和控件关联起来，aria-label是补救，不是替代 - 不要用
zoom或transform: scale()放大整个label，会导致内部文字模糊、布局错位
IE11 下 ::before 不显示对勾？兼容写法怎么写
IE11 对伪元素的 content 和 transform 支持有坑，尤其当父容器是 inline 时，::before 宽高常失效。别碰 filter: progid:DXImageTransform.Microsoft.Alpha 这种古董方案。
- 强制
label::before为块级：display: inline-block+ 明确width/height - 对勾用
border拼（比如两段斜线），比用字体图标或 SVG 更稳；IE11 对border渲染一致 - 避免
transform: rotate()，改用clip-path或纯 border 技巧实现对勾形状 - 如果必须用图标字体（如 Font Awesome），确保 IE11 加载了
.eot字体，并设font-family回退到系统字体防空白
input 始终在线、可读、可提交——所有花哨样式都得为它服务，而不是反过来。 
