因为浏览器对input[type="radio"]原生样式控制极弱，appearance: none是唯一可靠入口，但必须配合伪元素或兄弟选择器重绘；直接设置background-color、border-radius等属性无效，需隐藏原生控件（position: absolute; opacity: 0; pointer-events: none）后，通过label::before/::after模拟外观，并用input:checked + label::after触发状态变化。
为什么直接用 input[type="radio"] 无法直接美化？
因为浏览器对 input[type="radio"] 的原生样式控制极弱，appearance: none 是唯一可靠入口，但必须配合伪元素或兄弟选择器才能画出新样式。直接写 background-color 或 border-radius 对原生单选框无效——它根本不会渲染这些属性。
用 label + input 隐藏原生控件再重绘
核心思路是把原生 input 视觉隐藏（不设 display: none，否则失去可访问性和表单提交能力），用紧邻的 label 或其 ::before/::after 伪元素模拟外观。
- 给
input加position: absolute; opacity: 0; pointer-events: none;—— 隐藏但保留语义和功能 - 给
label设position: relative;，再用label::before绘制圆圈外框，label::after绘制选中实心点 - 用
input:checked + label::after触发选中态变化，注意必须是「相邻兄弟选择器」，所以 HTML 中input必须在label前面或包裹在label内
input:checked + label::after 不生效的常见原因
这个选择器失效，90% 是结构或优先级问题：
-
input和label不是相邻兄弟：比如中间插了span或换行符（HTML 中空格/换行在某些情况下会生成文本节点） -
label没设position: relative，导致::after脱离文档流后定位错乱 - CSS 优先级被其他规则覆盖，比如用了
!important的全局重置样式 - 忘记给
label::after设content: ""—— 伪元素没 content 就不渲染
移动端点击区域太小怎么办？
原生单选框点击热区极小，用户容易点不中。解决方式不是放大 input，而是扩大 label 的可点击范围：
- 给
label设padding: 8px 12px;，既留白又提升触控容错 - 若用图标替代文字，确保图标容器宽高 ≥ 44×44px（iOS 最小触控建议）
- 避免用
font-size: 0清空 label 内部空白——可能意外影响辅助技术读取 - 测试时真机点按，别只靠鼠标悬停模拟
真正麻烦的是 Safari 对 appearance: none 的旧版本兼容处理不一致，如果要支持 iOS 12 以下，得加 -webkit-appearance: none; 并手动重置所有默认边框和背景。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
