原生radio和checkbox无法直接美化，因浏览器限制其样式控制，需隐藏原生控件（position: absolute; opacity: 0; pointer-events: none），用label+伪元素重构视觉层，同时保留语义、可访问性及键盘交互。
为什么原生 <input type="radio"> 和 <input type="checkbox"> 不能直接美化？
因为浏览器对这类表单控件的样式控制极其有限：appearance: none 能隐藏默认外观，但之后你得自己接管所有状态（:checked、:disabled、焦点、键盘交互），而且原生元素仍需保留语义和可访问性。直接加 background 或 border 基本无效，尤其在 Safari 和旧版 Edge 上。
用 label 包裹 + input 隐藏 + 自定义伪元素实现
核心思路是把原生 input 视为“状态引擎”，视觉层完全由 label 和它的 ::before/::after 构建。这样既保住了 for/id 关联、键盘空格切换、屏幕阅读器识别，又获得完全自由的样式控制。
- 必须给
input加position: absolute; opacity: 0; pointer-events: none;（不能只用display: none或visibility: hidden，否则会丢失焦点和可访问性） -
label需设position: relative;，以便伪元素精确定位 - 用
input:checked + label::before控制选中态（注意：必须是相邻兄弟选择器，input必须在label外部且紧邻） - 复选框常用
border-radius: 4px+background+clip-path或 SVG 图标；单选框更适合border-radius: 50%+ 内圆填充
处理键盘与屏幕阅读器的关键细节
仅靠鼠标点击 label 不够——用户按 Tab 进入后，需要能用 Space 切换，且焦点样式要可见。很多人漏掉这点，导致 WCAG 2.1 AA 不合规。
-
input本身必须保留在 DOM 中、不被移除，且不能加tabindex="-1" - 给
label加outline: 2px solid #007bff;（或使用focus-visible更精准） - 对单选组，确保所有
input共享相同name，否则无法互斥 - 添加
aria-checked="true/false"是多余的——原生checked属性已足够，强行覆盖反而干扰读屏器
避免常见布局错位与点击失效
最常踩的坑是伪元素定位偏移，或 label 的 cursor: pointer 没生效，导致点不中。
立即学习“前端免费学习笔记（深入）”；
- 别依赖
margin推动伪元素位置，统一用top/left+transform: translate()微调 -
label必须设display: inline-flex或inline-block，否则text-align和内部对齐不可控 - 如果按钮内容含图标+文字，用
gap: 8px比margin-left更稳定 - 移动端要注意
touch-action: manipulation防止 300ms 延迟
复杂点在于：不同浏览器对 appearance: none 的支持仍有细微差异，iOS Safari 对 input[type="checkbox"]:checked::after 的渲染优先级偶尔异常——遇到时优先检查是否误用了后代选择器（如 label input:checked::before），改用相邻兄弟选择器即可解决。
