checkbox 样式不一致源于浏览器默认渲染差异，需用 appearance: none 清除原生样式并用伪元素重绘；须确保 label 点击区域≥44×44px，正确处理：focus-visible 与 indeterminate 状态。
checkbox 选中状态样式不一致，是因为浏览器默认样式没清干净
所有现代浏览器对 <input type="checkbox"> 都有内置渲染逻辑，但各自实现不同：Chrome 用伪元素 + 硬编码图标，Firefox 用系统主题，Safari 在某些 macOS 版本里甚至会响应 :checked 但忽略 :indeterminate。直接写 input[type="checkbox"] {background: red;} 基本无效——因为默认外观压根不是靠 background 控制的。
- 必须先用
appearance: none;（带-webkit-和-moz-前缀）彻底剥离原生样式 - 只重置
input[type="checkbox"]，别用通配符或全局* {appearance: none;}，否则会意外干掉<select>或<button> - 移除默认样式后，
:checked和:indeterminate依然可用，但视觉反馈得你完全自己画
用 ::before / ::after 画自定义 checkbox，关键在定位和尺寸对齐
剥离原生样式后，得靠伪元素模拟勾选框。但 input 本身不能设宽高，所以得包裹一层标签（比如 <label>），再把伪元素挂到 label 上，通过 for 或嵌套关联 input。
- 伪元素必须设
display: inline-block或block，否则width/height不生效 - 用
position: absolute定位时，父<label>要加position: relative，不然伪元素会相对 body 偏移 - 勾选图标建议用 SVG 内联（
background-image: url("data:image/svg……")）或clip-path绘制，避免字体图标在高 DPI 屏幕模糊 - 别依赖
input:checked + label::before这种相邻选择器——如果 HTML 结构是label > input，就该用label input:checked + span::before或更稳妥的 JS 切 class
移动端点击区域太小，光改 checkbox 大小没用
用户点不中，问题不在 checkbox 本身，而在可点击区域（hit area）太窄。iOS Safari 默认最小点击区域是 44×44px，Android 也类似。单纯放大 ::before 尺寸，但 label 的 padding 或 line-height 没跟上，手指还是容易误触。
- 给
<label>设min-width: 44px; min-height: 44px;，再配合padding确保实际触控区达标 - 避免用
transform: scale(1.5)放大伪元素——它会缩放整个渲染层，导致边缘模糊，且不扩大 hit area - 测试时真机连调试器，别只信 Chrome DevTools 的 device mode；部分 Android WebView 对
touch-action处理异常，可加label {touch-action: manipulation;}
focus 样式被忽略，不是没写，是没触发
:focus 在 checkbox 上表现诡异：键盘 Tab 到它时，焦点确实存在，但很多浏览器不会显示默认焦点环（尤其 macOS + Safari），而你又清掉了所有原生样式，结果就是“看不见焦点，但其实有”。
立即学习 “ 前端免费学习笔记（深入）”；
- 别只写
input:focus，要加上input:focus-visible，并确保未禁用:focus-visible的 polyfill（如 Firefox 旧版） - 如果用了 JS 模拟切换（比如阻止默认行为再手动改
checked），记得调用input.focus()，否则焦点不会自动落到它身上 - 无障碍要求下，焦点样式必须和背景有足够对比度（至少 4.5:1），纯色边框不如双层阴影（
box-shadow: 0 0 0 2px #fff, 0 0 0 4px #007aff;）可靠
最麻烦的其实是 indeterminate 状态——它没有对应伪类，只能靠 JS 动态加 class，且 Safari 对 input.indeterminate::before 的渲染支持不稳定。真要用，得 fallback 到背景图或额外 DOM 节点。
