应使用绝对定位视觉隐藏法：position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0)，避免 display: none 或 opacity: 0 等破坏可访问性的方案。
怎么用 CSS 隐藏原生 input[type="checkbox"] 和 input[type="radio"]
必须先隐藏原生控件，否则自定义样式会和浏览器默认渲染打架。直接设 display: none 最干脆，但会导致表单提交正常、可访问性（a11y）彻底丢失；更稳妥的做法是用视觉隐藏：用 position: absolute 移出视口，同时保留 clip 和 overflow: hidden 保证不被聚焦干扰。
-
opacity: 0不推荐——仍占布局空间，且部分屏幕阅读器可能误读 -
visibility: hidden同样不行——元素还在流中，点击区域错位 - 正确姿势：
position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0);
怎么用 ::before / ::after 模拟选中状态
隐藏原生控件后，得靠相邻的 label 或兄弟元素承载视觉反馈。关键点在于：伪元素必须挂载在 label 上（或用 for 关联），且状态切换依赖 :checked 伪类联动。
- 不能对
input自身加::before——它已被隐藏，伪元素也不渲染 - 典型结构：
<input type="checkbox" id="agree"><label for="agree">我同意</label>，然后写input#agree:checked + label::before - 注意兼容性：
::before在 IE8+ 支持，但:checked在 IE9+ 才可靠，老项目需降级 fallback
怎么让自定义样式响应 :focus 和键盘操作
纯鼠标点击没问题，但键盘 Tab 导航和空格/回车触发时，焦点仍在隐藏的 input 上，用户看不到当前聚焦态——这违反 WCAG 基础要求。
- 必须给
label加tabindex="0"并监听keydown，手动同步input.checked状态（尤其 radio 组） - 或者更简单：不隐藏
input，改用appearance: none（Chrome 95+/Firefox 96+ 支持），再叠加自定义样式，保留原生焦点环 - 若坚持绝对定位隐藏法，至少给
label加outline: 2px solid #007bff响应:focus-within
移动端点击区域太小导致误操作怎么办
原生 checkbox/radio 的点击热区只有几像素，自定义后若没扩大交互范围，手指点不准是常态。
- 别只改伪元素尺寸——把
label的padding设到至少12px以上，确保热区 ≥ 44×44pt（iOS 最小建议） - 避免用
transform: scale()单独放大伪元素——会缩放整个渲染层，模糊边缘且不增加点击面积 - 安卓 WebView 中，
touch-action: manipulation可减少 300ms 延迟，但需配合cursor: pointer触发
:disabled 样式没同步，或者用 JS 切换 checked 时忘了触发 change 事件——这些细节不补全，美化就只是“看起来行”。
