input[type="radio"]无法直接用background或border-radius美化，因其原生样式被浏览器严格限制；可行方案是隐藏原生控件并用label::after模拟视觉层，需确保input与label正确关联、伪元素content不为空、添加focus样式保障可访问性。
为什么 input[type="radio"] 不能直接用 background 或 border-radius 美化？
因为浏览器对原生 input[type="radio"] 的样式控制极其有限——background、border、width/height 大部分被忽略，甚至 appearance: none 在某些旧版 Safari 上也不生效。直接改它，90% 情况下毫无反应。
真正可行的路只有一条：隐藏原生控件 + 用 label 和 ::after（或 ::before）模拟视觉层。关键前提是：input 必须和 label 正确关联（通过 for 或嵌套），否则点击无效。
怎么用 ::after 重绘单选按钮的圆点和选中态？
核心思路是把原生 input 透明化并移出视口，再用 label::after 绘制一个可完全控制的圆圈；选中态靠 input:checked + label::after 触发样式切换。
-
input[type="radio"]设为position: absolute; opacity: 0; width: 1px; height: 1px;（比display: none更安全，保留可访问性和键盘焦点） -
label::before或label::after画外圈：设content: ""、display: inline-block、width/height、border: 2px solid #999、border-radius: 50% -
input:checked + label::after画内点：覆盖原外圈，用background: #007bff+ 同样border-radius: 50%，尺寸略小（如width: 8px; height: 8px;） - 注意伪元素默认是
inline，必须加vertical-align: middle对齐文字
常见翻车点：伪元素不显示 / 点击失效 / 选中态不更新
这些问题几乎都源于 DOM 结构或选择器写法错误，不是 CSS 本身难。
立即学习“前端免费学习笔记（深入）”；
- 伪元素没显示？检查
label是否有position: relative（如果伪元素用了absolute定位），或是否漏写了content: "" - 点击没反应？确认
input和label是兄弟关系且选择器是input + label（不是input ~ label），或者干脆用嵌套结构：<label><input type="radio">选项文本</label> - 选中态不更新？
:checked伪类只作用于input，所以必须用input:checked + label::after这种相邻兄弟选择器；若label不在input后面，就得换结构或 JS 监听 - 移动端点击区域太小？给
label加padding扩展热区，别只依赖伪元素尺寸
要不要加 focus 样式？为什么很多人忽略它
要加，而且必须加。键盘用户 Tab 切换时，如果 input 被 opacity: 0 隐藏但没提供 focus outline，就等于切断了无障碍路径。
- 方案一：保留原生 focus ring，在
input:focus + label::after上加box-shadow: 0 0 0 3px rgba(0,123,255,.25) - 方案二：用
label:focus-within::after模拟聚焦边框（兼容性稍好，但 IE 不支持:focus-within） - 千万别用
outline: none一删了之——这不是“美观”，是排除残障用户
伪元素重绘看着简单，但真正落地时，DOM 关联、可访问性、移动端点击响应这三块最容易漏掉。样式可以重画，逻辑链断了就真没法用了。
