不能直接给 input[type="radio"] 加 ::before 或 ::after，因主流浏览器引擎（Blink/Gecko/WebKit）在渲染层主动屏蔽原生表单控件的伪元素支持；必须用 label 作为样式载体，通过 position: relative + 伪元素精准定位，并以 opacity: 0 + position: absolute 隐藏原生 radio 以保障可访问性。
不能直接给 input[type="radio"] 加 ::before 或 ::after —— 所有主流浏览器（Chrome/Firefox/Safari）都禁止对原生表单控件使用伪元素，写了也无效。
为什么 input[type="radio"] 不能直接加伪元素？
这是最常踩的坑：你可能在调试器里看到样式规则被加载了，但界面上什么也不出现。根本原因是浏览器引擎（Blink/Gecko/WebKit）主动屏蔽了对 input、select、textarea 等原生控件的伪元素支持，属于渲染层限制，不是 CSS 写法问题。
必须把视觉样式“转移”到可操作的载体上，而 label 是唯一稳定、语义正确、无障碍友好的选择。
label 必须用 for 关联，且结构要可控
推荐写法是显式用 id/for 配对，而不是依赖相邻兄弟选择器（+），因为后者对 DOM 顺序极其敏感，一改结构就失效：
立即学习“前端免费学习笔记（深入）”；
<input type="radio" id="theme-dark" name="theme" value="dark"> <label for="theme-dark">深色模式</label>
这样即使中间插入其他元素，点击 label 仍能触发对应 input。如果非要用 +，那结构必须严格为：
-
input和label同级 -
label紧跟在input后面 - 不能有换行符或空格干扰（某些旧版 Safari 对空白节点敏感）
隐藏原生 radio 的两种方式，选错会出兼容性问题
别只用 appearance: none —— 它在部分安卓 WebView 和旧版 Safari 下不生效，且仍占布局空间。必须配合视觉隐藏手段：
-
input[type="radio"] { opacity: 0; position: absolute; }：最稳，保留可访问性和焦点逻辑 -
input[type="radio"] { display: none; }：简单粗暴，但会丢失键盘焦点和屏幕阅读器支持，慎用
如果你需要支持键盘导航（Tab 切换、空格选中），opacity: 0 + position: absolute 是唯一可靠方案。
label::before 和 input:checked + label::after 的定位细节
对勾/圆点偏移，90% 是因为没设 label { position: relative; }。伪元素默认相对 body 定位，一旦父容器有 transform、scale 或滚动，就会错位：
- 先给
label加position: relative和足够左内边距（如padding-left: 32px） -
label::before画外圈：position: absolute; left: 0; top: 50%; transform: translateY(-50%) -
input:checked + label::after画对勾：content: "✓"; font-size: 14px; left: 4px;（Unicode 字符比 SVG 更轻量、兼容性更好） - 避免用
transform: scale()做动画——某些安卓 WebView 渲染模糊，改用opacity或background-color过渡
真正难的不是画出来，而是让所有设备上都居中、不跳动、不遮挡文字。多测几款 iOS 和 Android 浏览器，尤其是微信内置 WebView。
