单选按钮原生样式无法用CSS直接修改，需隐藏原生控件并用label+伪元素模拟；accent-color仅作渐进增强，兼容性差，主方案必须依赖伪元素重绘。
单选按钮默认样式无法直接用 CSS 修改边框和颜色
浏览器对 <input type="radio"> 的原生样式控制极弱，border、background-color、accent-color（旧版不支持）等属性在多数场景下无效或行为不一致。直接写 input[type="radio"] { border: 2px solid red; } 几乎没用，尤其在 Safari 和旧版 Chrome 中完全被忽略。
真正可控的方式是隐藏原生控件，用 <label> + 自定义伪元素模拟视觉效果。这是目前最稳定、兼容性最好的做法。
用 ::before 伪元素重绘单选圆点
核心思路：将原生 input 设为 position: absolute; opacity: 0;，再让同级 label 承担点击区域，并通过 label::before 绘制自定义圆圈和选中状态。
-
label::before画外圈（未选中时的边框），用border或box-shadow控制粗细和颜色 -
input:checked + label::before覆盖内圆（选中态），用background-color+transform: scale()实现平滑填充 - 务必给
label设置display: inline-flex或display: inline-block，否则伪元素定位易错乱 - 示例关键片段：
input[type="radio"] { position: absolute; opacity: 0; } input[type="radio"] + label::before { content: ""; display: inline-block; width: 18px; height: 18px; border: 2px solid #999; border-radius: 50%; margin-right: 8px; } input[type="radio"]:checked + label::before { background-color: #007bff; border-color: #007bff; }
Chrome / Edge 115+ 可尝试 accent-color（但别全靠它）
新版 Chromium 支持 accent-color 属性，能一键修改原生单选/复选框高亮色，写法极简：
立即学习“前端免费学习笔记（深入）”；
-
input[type="radio"] { accent-color: #e63946; }—— 会同时改外圈边框色和内圆填充色 - 仅作用于“未被完全隐藏”的原生控件；一旦用了
opacity: 0或appearance: none，该属性失效 - Safari 16.4+ 才开始支持，Firefox 至今（2024）仍不支持，生产环境必须降级到伪元素方案
- 不支持单独控制边框宽度或圆角，所有样式细节仍需伪元素补足
常见翻车点：label for 与 DOM 结构不匹配
伪元素方案高度依赖 input 和 label 的相邻关系或显式绑定，稍有不慎就点击无响应或样式不联动：
- 用
input + label选择器时，label必须紧跟在input后面，中间不能有其他元素（包括换行符、空格文本节点） - 若结构是
<label><input>选项文本</label>，则必须用label input[type="radio"]定义基础样式，再用label input[type="radio"]:checked控制状态 -
for属性和id匹配失败时，点击 label 不会触发 input 切换 —— 检查控制台是否报Failed to execute 'querySelector' on 'Document'类错误 - 移动端点击热区太小？给
label加min-height: 24px; padding: 4px 0;扩展可点击区域
accent-color 可作为渐进增强，但主逻辑必须基于伪元素。最麻烦的不是写样式，而是确保每组单选按钮的 HTML 结构统一、label 绑定可靠——这点漏掉，调试十分钟不如重写两行 HTML。 
