需手动设置宽高、relative定位、pointer光标和vertical-align对齐；勾选状态用:checked+label::before实现，推荐border或svg；扩大label点击区域并确保for/id匹配；ie11用opacity隐藏+label模拟，禁用js模拟状态以保无障碍。
appearance: none 后复选框完全不可见了怎么办
直接加 appearance: none 会清空所有原生样式，包括勾选状态的视觉反馈——此时 input[type="checkbox"] 变成一个透明、无尺寸、无法点击的“幽灵”，不是失效，是真·看不见也点不着。
- 必须手动设置
width和height（原生控件默认无盒模型尺寸） - 必须用
position: relative配合伪元素定位，否则::before/::after无法精准覆盖 - 必须保留
cursor: pointer，否则用户感知不到可交互 - 别忘了加
vertical-align: middle，不然和文字基线对不齐，看着总像悬空
怎么让自定义方框在勾选时显示对勾
不能靠改 input 本身，得用 input:checked + label::before 或 input:checked::after 这类组合选择器驱动状态变化。关键是把勾画在 label 上，而不是 input 上——因为 input 不支持 ::before/::after。
- 推荐结构：用
<input type="checkbox" id="cb1"><label for="cb1">选项</label> - 勾的实现优先用
border拼（兼容性好），或background-image: url("data:image/svg...")（更灵活） - 避免用
content: "✓"，字体渲染不一致，iOS 和 Windows 下符号粗细、位置常错位 - 动画建议只加
transform: scale()，别碰opacity—— Safari 对 checkbox 伪元素 opacity 动画有闪烁 bug
移动端点击区域太小，点不中怎么办
原生复选框点击热区仅限于那几个像素，appearance: none 后若没扩大，用户拇指根本点不准，尤其在 iOS Safari 中容易误触或无响应。
- 给
label设padding: 8px或更大，热区跟着 label 走 - 确保
label的for属性和input的id完全一致，大小写、空格都不能错 - 不要用
label > input包裹结构再设pointer-events: none，这会让整个 label 失去点击穿透能力 - 在 iOS 上，如果 label 里有
display: flex或inline-flex，需额外加-webkit-tap-highlight-color: transparent消除点击灰斑
IE11 和旧版 Safari 兼容不了 appearance: none 怎么办
appearance 在 IE11 完全不支持，Safari ≤ 15.4 需要 -webkit-appearance 前缀且部分行为异常（比如清不掉边框圆角）。纯 CSS 方案在此处断层，必须降级或补救。
立即学习“前端免费学习笔记（深入）”；
- 检测支持：用
@supports (appearance: none)包裹新样式，老浏览器自动跳过 - IE11 专用：加
input[type="checkbox"] { opacity: 0; position: absolute; }隐藏原生框，再用 label 模拟，这是最稳的 fallback - 别试图用 JS 监听
click后切换 class 来模拟状态——会破坏屏幕阅读器的语义，无障碍直接报废 - 如果项目强制要求支持 IE11，建议直接用
background-image替代伪元素，绕开appearance依赖
真正麻烦的从来不是画个好看的勾，而是让每个状态都响应准确、每台设备都点得着、每个读屏软件都读得懂。样式可以重画，但语义链断了，就只能返工。
