直接修改 radio 样式无效，因浏览器严格限制其 CSS 属性；应隐藏原生 radio，用 label 与伪元素模拟外观，并确保语义、可访问性及跨浏览器兼容性。
为什么直接改 <input type="radio"> 的样式没用
浏览器对原生 <input type="radio"> 的样式控制极严，border、background、width 等 CSS 属性基本被忽略，强行设置常无效或仅在部分浏览器生效。真正能稳定自定义的路径是：**隐藏原生 radio，用 <label> 和伪元素（::before/::after）模拟外观**。
关键前提是确保点击 label 仍能触发对应 radio 的选中行为——这依赖 for 属性或嵌套结构。
用 appearance: none 隐藏原生样式并重绘
现代浏览器（Chrome 90+、Firefox 93+、Safari 15.4+）支持 appearance: none，这是最简洁的起点。但注意它只是“移除默认样式”，不等于“可自由绘制”，后续必须手动定义宽高、边框、背景等。
- 必须显式设置
width和height，否则元素可能坍缩为 0 -
vertical-align: middle常需添加，避免与文字基线错位 - 选中状态用
:checked + label::before或input:checked::after实现（取决于 DOM 结构） - Safari 对
appearance: none下 radio 的border-radius支持不稳定，圆角建议用clip-path备用
input[type="radio"] {
appearance: none;
width: 18px;
height: 18px;
border: 2px solid #999;
border-radius: 50%;
vertical-align: middle;
}
input[type="radio"]:checked {
border-color: #007bff;
background: #007bff;
}
input[type="radio"]:checked::after {
content: "";
display: block;
width: 8px;
height: 8px;
border-radius: 50%;
background: white;
margin: 4px;
}
兼容老浏览器（IE11 / Android 4.4）的 fallback 方案
IE11 不支持 appearance，Android 4.4 WebView 对伪元素渲染异常。此时只能走「完全隐藏 + label 模拟」路线：
立即学习“前端免费学习笔记（深入）”；
- 用
position: absolute; opacity: 0; pointer-events: none;彻底隐藏原生 radio - 确保
<label>与 radio 同级且有for="id"，或直接把 radio 嵌在 label 内 - 在 label 上用
::before绘制外圈，::after绘制内点，通过input:checked + label::after控制显示 - 注意
for的id必须唯一，且不能含特殊字符（如空格、点号），否则 JS 获取失败
input[type="radio"] {
position: absolute;
opacity: 0;
pointer-events: none;
}
input[type="radio"] + label::before {
content: "";
display: inline-block;
width: 18px;
height: 18px;
border: 2px solid #999;
border-radius: 50%;
margin-right: 8px;
vertical-align: middle;
}
input[type="radio"]:checked + label::after {
content: "";
display: block;
width: 8px;
height: 8px;
border-radius: 50%;
background: #007bff;
margin: 4px auto;
position: relative;
top: -22px;
left: 4px;
}
无障碍与焦点管理容易被忽略的细节
自定义后若不处理，屏幕阅读器可能读不出选项状态，键盘用户无法用 Tab 进入、空格切换。必须保留语义和可访问性链路：
- 原生
<input>不能移除，也不能设disabled或tabindex="-1" - label 必须正确关联（
for或嵌套），否则 NVDA/JAWS 无法播报“已选中” - 用
:focus-within或input:focus + label给焦点态加 outline，别只靠颜色变化 - 如果用图标字体或 SVG 替代伪元素，要加
aria-hidden="true"，避免重复朗读
最麻烦的其实是移动端：iOS Safari 在 label 上触发 ::after 动画时偶发卡顿，建议动画属性限制为 transform 和 opacity。
