移动端自定义单选/复选框需用-webkit-appearance: none隐藏原生控件，显式设置宽高，通过input:checked + label::before/after绘制状态，配合position: absolute; clip: rect(0 0 0 0)视觉隐藏并保留可访问性，同时处理暗色模式、焦点样式与300ms延迟。
移动端实现自定义单选框/复选框，核心不是“能不能”，而是“怎么藏得干净、画得准、状态跟得上”。直接对 input[type="radio"] 或 input[type="checkbox"] 写 background-color 或 border-radius 一定无效——浏览器在移动端（尤其 iOS Safari）对这些替换元素的样式封锁比桌面端更严格。
appearance: none 必须带全前缀，且立刻补宽高
只写 appearance: none 在 iOS 15.4 之前和部分 Android WebView 中完全不生效；-webkit-appearance: none 是刚需，-moz-appearance: none 也建议加上。但更关键的是：移除默认样式后，控件会坍缩成一个不可点击的点。
- 必须显式设置
width和height（如18px），否则点击区域消失，用户点不中 - 不能依赖父容器撑开尺寸，
input是替换元素，display: inline-block也不起作用 - 推荐用
flex布局让label包裹input，再通过label控制整体尺寸和对齐
:checked + label::before 是移动端最稳的绑定方式
在 iOS Safari 和旧版 Chrome for Android 中，input::before 根本不渲染——因为 input 是替换元素，伪元素支持极差。唯一可靠路径是把视觉层完全交给 label，靠相邻选择器同步状态。
- HTML 结构必须为：
<input type="checkbox" id="agree"><label for="agree">我同意</label>，且二者同级 - 样式锚点写成：
input[type="checkbox"]:checked + label::before，而非input::before -
::before画外框（未选中态），::after画对勾或实心圆（选中态），避免混用同一伪元素切换两种图形 - 给
input加pointer-events: none，防止它遮挡label的点击热区（iOS 上尤其明显）
移动端隐藏原生控件，别用 opacity: 0
opacity: 0 在 iOS Safari 中会导致控件失去焦点能力与可访问性，屏幕阅读器可能跳过，Tab 键也无法聚焦。正确做法是视觉隐藏但语义保留。
立即学习“前端免费学习笔记（深入）”；
- 用
position: absolute; clip: rect(0 0 0 0);把原生控件移出视口 - 同时加
margin: -1px; border: 0; padding: 0; width: 1px; height: 1px;进一步压缩占位 - 确保
label有for属性或包裹input，否则点击label不触发状态变更 - 禁用态（
:disabled）要同步处理label文字颜色和伪元素灰度，否则视觉割裂
暗色模式与 focus-visible 兼容性必须手动处理
Tailwind 的 dark: 前缀对伪元素无效，::before 里的颜色不会自动响应系统偏好；而移动端键盘导航时，:focus 在 Safari 中常被忽略，必须用 :focus-visible。
- 用媒体查询控制暗色模式：
@media (prefers-color-scheme: dark) { .custom-checkbox:checked + label::before { background-color: #374151; } } - 焦点样式必须独立写：
input:focus-visible + label::before { outline: 2px solid #0d6efd; outline-offset: 2px; } - 不要用
outline: none彻底干掉焦点，这是可访问性红线 - 动画过渡推荐用
transform和opacity，避免触发布局重排，在低端安卓机上更流畅
最易被忽略的其实是点击反馈延迟——iOS Safari 默认有 300ms 点击延迟，如果没引入 viewport meta 或使用 touch-action: manipulation，用户会感觉“点了没反应”。这不是样式问题，但会直接归咎于你的自定义控件不灵敏。
