appearance: none 单独使用基本无效，必须配合-webkit-appearance: none、-moz-appearance: none三前缀声明，立即设置width/height防塌缩，并用position: absolute + clip隐藏原生控件以保障可访问性与点击区域。
appearance: none 单独用基本无效，必须配前缀 + 尺寸重置 + 隐藏策略，否则控件会塌缩、点击失效、Safari 里直接不响应
为什么 appearance: none 写了却没效果
浏览器对 input[type="checkbox"] 的渲染是“原子级”的，appearance: none 只是松开锁，不是万能钥匙。Safari 15.4 之前对 radio 完全不认这个属性，Firefox 84 及以下即使写了 -moz-appearance: none，原生控件仍可能“透出”一小块。
常见错误现象包括：复选框消失但点击无反应、勾选状态不更新、键盘 Tab 到该元素时焦点不可见。
- 必须同时写三套：
-webkit-appearance: none、-moz-appearance: none、appearance: none - 移除后控件默认宽高塌缩为 0，立刻补上
width: 18px和height: 18px（或你设计的尺寸） - 仅靠
opacity: 0不够——它仍占布局空间，且部分屏幕阅读器会跳过透明元素；推荐用position: absolute; clip: rect(0, 0, 0, 0)组合
如何用 ::before / ::after 绘制可响应的自定义外观
::before 和 ::after 不能直接加在 input[type="checkbox"] 上生效，因为原生控件不支持伪元素渲染。正确路径是：绑定 label，用相邻兄弟选择器（+）联动状态。
立即学习“前端免费学习笔记（深入）”；
使用场景：你想点击文字区域也能触发选中，同时让视觉反馈和真实状态严格同步。
- HTML 结构必须是
<input type="checkbox" id="agree"><label for="agree">我已阅读条款</label>，且二者同级 - 样式锚点落在
label上：input[type="checkbox"]:checked + label::before控制“打勾”出现 -
::before画边框方块（未选中态），::after叠加对勾图标（选中态），避免混用同一伪元素切换状态 - 用
background-image: url("data:image/svg+xml,...")或mask+background-color实现高清对勾，比 border 拼凑更可控
:focus-visible 和 :disabled 状态容易被忽略
键盘用户按 Tab 导航到复选框时，如果只写了 :focus，在 Chrome/Firefox 中可能不触发（因默认只对“键盘聚焦”启用 :focus-visible）。禁用态若只改颜色，屏幕阅读器可能仍播报“可交互”，造成误导。
- 务必加
input[type="checkbox"]:focus-visible + label::before，并设置清晰的轮廓（如outline: 2px solid #007bff） -
:disabled要作用于input本身，再通过input:disabled + label控制视觉灰阶，同时加cursor: not-allowed - 不要用
title属性做提示——它不被所有屏幕阅读器读出，且移动端不触发；用aria-describedby关联说明文本更稳妥 - 暗色模式下，
accent-color无法控制形状，仅改高亮色；若需深色背景下的白勾，仍得靠 SVG 或filter: invert()手动适配
最复杂的一环其实是 DOM 结构与 CSS 选择器的咬合：label 和 input 必须同级、id/for 必须精确匹配、伪元素层级不能被父容器 overflow: hidden 截断——这些细节一错，:checked 就永远不联动，而错误又不会报任何控制台警告。
