必须隐藏原生 radio 输入框并用 label 和伪元素模拟样式，因浏览器禁止直接修改其 border、background 等外观；需用 position: absolute + opacity: 0 + pointer-events: none 隐藏但保留可访问性，并通过 :checked + 相邻兄弟选择器控制状态样式，同时确保 name 属性统一且 label 正确绑定以保障单选逻辑与无障碍支持。
必须隐藏原生 <input type="radio">，再用 label 和伪元素模拟视觉效果，否则样式无法生效——浏览器对原生单选控件的 CSS 支持极其有限。
为什么直接给 input[type="radio"] 加 border 或 background 没用
绝大多数现代浏览器（Chrome、Firefox、Safari）禁止通过常规 CSS 属性修改 input[type="radio"] 的核心外观。设置 border、background、width 等会静默失效，只有部分旧版 IE 曾支持极简定制。
真正起效的方式只有一种：让原生控件不可见但保留在 DOM 中（维持表单语义、键盘焦点、可访问性），再用关联的 label 渲染自定义图形。
- 不能用
display: none或visibility: hidden—— 会导致键盘无法聚焦、屏幕阅读器跳过 - 推荐组合：
position: absolute+opacity: 0+pointer-events: none - 必须确保
label与input正确绑定（for属性或包裹结构），否则点击文字不触发选中
:checked + +（相邻兄弟选择器）控制选中状态样式
原生控件被隐藏后，需要靠 CSS 侦测其状态变化，并影响紧随其后的自定义元素（如 span 或伪元素）。关键在于利用 :checked 伪类和相邻兄弟选择器 +。
立即学习“前端免费学习笔记（深入）”；
HTML 结构示例：
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
<label> <input type="radio" name="theme" value="light"> <span class="custom-radio"></span> 浅色模式 </label>
CSS 核心片段：
.custom-radio {
display: inline-block;
width: 18px;
height: 18px;
border: 2px solid #999;
border-radius: 50%;
margin-right: 8px;
vertical-align: middle;
}
input[type="radio"] {
position: absolute;
opacity: 0;
pointer-events: none;
}
input[type="radio"]:checked + .custom-radio {
border-color: #007bff;
background: radial-gradient(circle, #007bff 0%, #007bff 40%, transparent 40%);
}
- 必须保证
input和.custom-radio是相邻兄弟关系，否则+不匹配 - 若用
::before或::after替代span，需将伪元素加在label上，并用input:checked ~ label::before（注意是~，因非相邻） - 选中态的内部圆点建议用
radial-gradient实现，比绝对定位小圆更稳定、无锯齿
name 属性不统一导致“看似单选实则多选”的坑
自定义外观再漂亮，如果同组 input[type="radio"] 的 name 值不一致，用户就能同时选中多个——浏览器根本不管你的 CSS 长什么样，只认 name。
常见翻车现场：
- 复制粘贴时漏改
name，比如写成name="color"、name="size"、name="style"，三者互不干扰 - 前后端约定 value 为
"dark"/"light"，但 HTML 里误写成name="mode"，而 JS 查询却用document.querySelector('input[name="theme"]:checked')→ 返回null - Vue/React 动态渲染时，
v-for或.map()中未显式传入统一name，导致每个 radio 的name是唯一 ID
验证是否真单选：打开 DevTools，在 Elements 面板手动勾选一个，再点另一个——前者应自动取消。若没取消，立刻检查所有 name 值。
可访问性容易被忽略的三个硬性要求
视觉美化不能以牺牲可用性为代价。以下三点不满足，就可能被 WCAG 检查工具标为严重问题：
-
label必须可聚焦且有明确焦点样式（例如outline），否则键盘用户 Tab 到它时看不见当前在哪 - 隐藏原生控件时，不能移除
id；若用for绑定，for值必须与input的id完全一致（大小写敏感、无空格） - 当用伪元素模拟圆点时，需为
label添加role="radio"和aria-checked="true/false"，并用 JS 同步更新（纯 CSS 无法驱动 ARIA 状态）
最稳妥的做法：保留原生结构，只做视觉覆盖，不接管状态逻辑。复杂交互（如禁用态、错误态）优先走表单框架（如 React Hook Form）或原生 fieldset[disabled] 控制。
