直接修改input[type="radio"]样式行不通，因浏览器对其渲染有强限制，多数css属性无效；需隐藏原生控件并用label+伪元素模拟，通过:checked状态控制::after实现视觉切换。
为什么直接改input[type="radio"]的样式行不通
浏览器对原生input[type="radio"]的渲染做了强限制，绝大多数CSS属性（比如background、border-radius、width）在它身上无效，display: none倒是可以隐藏，但会同时丢掉可访问性和焦点行为。所以必须借助伪元素和兄弟选择器绕开这个限制。
用label包裹+:checked + label::after是最稳的写法
核心思路是：隐藏原生单选框，用label作为视觉载体，通过:checked状态触发label上::after的样式变化。注意必须是**相邻兄弟选择器**（+），且input必须在label之前（或用for/id绑定）。
常见错误现象：input:checked::after完全不生效——因为input本身不支持::after；label::after始终显示，不随选中切换——多半是:checked没正确关联到label。
-
input设为position: absolute; opacity: 0; width: 1px; height: 1px;（比display: none更安全，保留语义和键盘焦点） -
label需有明确宽高和position: relative，否则::after定位会飘 -
label::after用content: ""+position: absolute画圆点，选中时用input:checked + label::after控制opacity或transform
示例关键片段：
input[type="radio"] {
position: absolute;
opacity: 0;
width: 1px;
height: 1px;
}
label {
position: relative;
padding-left: 28px;
cursor: pointer;
}
label::before {
content: "";
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
width: 16px;
height: 16px;
border: 2px solid #999;
border-radius: 50%;
}
input:checked + label::after {
content: "";
position: absolute;
left: 5px;
top: 50%;
transform: translateY(-50%);
width: 6px;
height: 6px;
background: #007bff;
border-radius: 50%;
}
label::before和label::after分工要明确
label::before负责画未选中的外圈（空心圆），label::after只负责画选中时的实心圆点。如果把两个都塞进::after，用opacity切换，容易在动画或过渡时出现重叠或错位。分开后，外圈固定，内点只在选中时出现，逻辑更干净。
性能影响小，但要注意：如果给::after加transition: all，务必限制只过渡opacity或transform，避免触发布局重排。
无障碍和键盘支持不能只靠视觉
隐藏input后，必须确保label能响应Enter和Space键。现代浏览器基本能自动继承，但若用了pointer-events: none或tabindex="-1"，就会断掉。另外，用aria-checked手动同步状态是冗余的——原生input:checked已自带该语义，屏幕阅读器能正确读出“已选中”。
容易被忽略的是焦点样式：label:focus-within::before或input:focus + label::before加个虚线边框，否则键盘用户找不到当前焦点在哪。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
