原生 radio 无法直接设置 border-radius 等样式，因浏览器强制封装；必须用 position: absolute + opacity: 0 + pointer-events: none 隐藏并保留可访问性，再通过 label::before 绘外圈、input:checked + label::after 绘内点实现自定义。
原生 input[type="radio"] 无法直接设置 border-radius、background-color 或 transform，这不是你写错了，是浏览器强制封装的结果。必须隐藏它，再用 label 和伪元素重绘视觉层。
为什么直接改 input[type="radio"] 样式无效
所有现代浏览器都忽略对原生单选框的绝大多数 CSS 声明：宽度、背景、边框圆角、阴影——全被无视。唯一可靠控制的是 opacity 和 position。想换样式，只能绕开它，而不是硬改它。
-
appearance: none单独用不保险：Safari 15.4 之前、Firefox 84 及以下仍可能“透出”原生控件 -
display: none或visibility: hidden会切断键盘焦点和屏幕阅读器支持，属于可访问性事故 - 真正起效的隐藏组合是：
position: absolute+opacity: 0+pointer-events: none
HTML 结构决定选择器能否生效
:checked + label 这类相邻兄弟选择器极其敏感，DOM 顺序错一丁点就失效。
- ✅ 安全结构：
<input type="radio" id="opt1"><label for="opt1">选项一</label>（同一行，无空格、无换行、无注释） - ❌ 常见断链：
<input>\n<label></label>或<input><span></span><label></label>—— 中间任何节点都会让+失效 - ⚠️ 框架场景（React/Vue）动态渲染时，DOM 顺序可能被破坏，建议降级用
input:checked ~ label[for="opt1"]，但需确保label在同级且位于input后方
用 ::before 和 ::after 绘制圆点与选中态
视觉元素必须绑定在 label 上，且 label 要设 position: relative 才能精确定位伪元素。
-
label::before适合画外圈：设content: ""、border: 2px solid #999、border-radius: 50% -
input:checked + label::after适合画内点：用transform: scale(1)或background-color控制显隐 - 动画要加在伪元素上，比如
transition: transform 0.2s ease，不能加在label本身——因为:checked是离散状态切换，只有可过渡属性才有效 - 别忘了同步处理
:disabled态：input:disabled:checked + label::before需单独设灰阶颜色，否则视觉割裂
暗色模式与可访问性容易被跳过
伪元素颜色不会自动响应 prefers-color-scheme，dark: 前缀对 ::before 无效。
- 正确做法是用媒体查询：
@media (prefers-color-scheme: dark) { input:checked + label::before { background-color: #374151; } } - 焦点 outline 必须适配深色背景，
focus:ring-blue-500在暗色下可能看不见，得换为focus:ring-white或带透明度的浅色 - 键盘 Tab 切换时，焦点落在哪？如果
input被pointer-events: none但没保留天然可聚焦性（比如没包进label），焦点就“消失”了
最常被忽略的不是怎么画圆点，而是当用户用键盘 Tab 进入、按空格选中、用屏幕阅读器听到“已选中”时，整个链条是否完整。视觉只是表层，可访问性才是底线。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
