无法直接修改 radio 样式因浏览器硬编码渲染且 appearance: none 有兼容性与可访问性问题；可靠方案是视觉隐藏 input 后用 label 伪元素模拟圆点，并确保语义、焦点和屏幕阅读器支持。
label 里放 input[type=radio] 为什么不能直接改样式
因为浏览器对 <input type="radio"> 的原生渲染是硬编码的，CSS 无法直接控制它的外观（比如圆点、大小、颜色）。强行给 input[type="radio"] 加 appearance: none 虽然能隐藏，但会丢失可访问性，且在 Safari 旧版本里不生效。
真正可靠的做法是：用 label 包裹 input，然后把 input 视觉隐藏（不设 display: none，否则屏幕阅读器读不到），再用 label::before 或 label::after 画出自定义圆点，并通过 :checked 状态联动样式。
- 必须保留
input在 DOM 中且未被display: none或visibility: hidden完全屏蔽，否则键盘 Tab 和屏幕阅读器会跳过它 -
label必须和input正确关联（用for属性或嵌套），否则点击 label 不会触发选中 - 自定义圆点建议用
border-radius: 50%+border+background组合，比纯box-shadow更可控
用 CSS 隐藏原生 radio 并绘制自定义圆点
核心是两步：隐藏原生控件 + 用伪元素模拟视觉反馈。下面是最小可行写法：
<label class="custom-radio"> <input type="radio" name="theme" value="dark"> 深色模式 </label>
对应 CSS：
.custom-radio input[type="radio"] {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
border: 0;
}
<p>.custom-radio::before {
content: "";
display: inline-block;
width: 18px;
height: 18px;
margin-right: 8px;
vertical-align: middle;
border: 2px solid #999;
border-radius: 50%;
background: white;
}</p><p>.custom-radio input[type="radio"]:checked + span::before,
.custom-radio input[type="radio"]:checked ~ span::before {
/<em> 错误写法：label 里没有 span，这个选择器无效 </em>/
}</p>
注意上面最后一段是常见错误——input 在 label 内部，没法用 + 或 ~ 找到兄弟元素。正确做法是把伪元素挂在 label 上，并用 :has()（现代浏览器）或调整 HTML 结构（兼容方案）。
- 兼容方案：把
input放在label开头，然后用label input[type="radio"]:checked + *::before控制后续内容前的图标（需配合span包裹文字） - 现代方案（Chrome 105+ / Safari 15.4+ / Firefox 121+）：直接用
label:has(input:checked)::before，干净利落 - 别忘了加
cursor: pointer到label，否则用户看不出可点击
确保键盘和屏幕阅读器正常工作
只靠鼠标点击 label 是不够的。用户按 Tab 键聚焦时，焦点必须落在 input 上，回车/空格才能切换状态；同时 SR（如 VoiceOver、NVDA）要能读出选项含义和当前状态。
- 移除所有
tabindex="-1"或aria-hidden="true"对input的干扰 - 如果用了
aria-label，优先写在input上，而不是只写在label文本里 - 测试方式：Tab 到该选项 → 按空格 → 看是否切换；开启 VoiceOver → 听是否播报 “深色模式，未选中，单选按钮” 类似信息
- 不要用
div+role="radio"替代原生input，除非你愿意手写完整 ARIA 状态管理（focus、checked、roving tabindex…）
移动端点击区域太小怎么办
默认的自定义圆点只有 18×18px，手指点不准。不能只放大伪元素，得扩大整个可点击热区。
- 给
label设min-height: 44px（iOS 推荐最小触控尺寸），并用padding-left避免文字紧贴圆点 - 用
label::before { margin-left: -24px; }把圆点向左偏移，让点击区域从 label 左边缘开始算起 - 避免给
input加transform: scale(1.5)—— 这会让实际焦点框变形，影响可访问性提示 - 真机测试时留意 iOS Safari 的 300ms 延迟是否被禁用（通常 modern CSS 里有
touch-action: manipulation）
最易被忽略的是：很多人做完样式就以为完了，结果发现盲人用户根本无法操作，或者安卓 TalkBack 读不出“已选中”。可访问性不是锦上添花，是单选框功能成立的前提。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
