纯CSS可实现美观可用的自定义单选按钮，关键在于用label包裹input并利用其伪元素：label::before画圆圈，input:checked + label::after打勾；input需保留可访问性（不能display:none），用position+opacity或clip隐藏；label设relative定位，扩展点击区域需通过min-height或外层容器实现。
纯 CSS 能做出美观、可用的自定义单选按钮，但必须绕开浏览器对 input[type="radio"] 的伪元素限制——直接给它加 ::before 或 ::after 无效，这是最常卡住的地方。
为什么不能直接给 input[type="radio"] 写伪元素？
Chrome、Firefox、Safari 全都不支持对 input、select 等原生表单控件使用 ::before/::after。规则能写进 CSS，调试器里也能看到，但页面上什么也不渲染。强行这么做，等于白写。
真正起作用的载体只能是关联的 label：要么用 for 属性指向 input 的 id，要么——更推荐——直接用 label 包裹 input。
- 包裹写法天然语义正确，无需生成唯一
id，SSR 或 React/Vue 动态渲染时也更稳 -
input必须保留（不能display: none），否则键盘空格切换、屏幕阅读器播报会失效 - 视觉隐藏要用
position: absolute; opacity: 0;或clip+overflow: hidden组合
label::before 绘圆圈 + input:checked + label::after 打勾的写法
这是目前兼容性好、代码轻量、易调可控的主流方案。关键在于定位精准和点击区域合理。
立即学习“前端免费学习笔记（深入）”；
-
label设position: relative，为伪元素提供定位上下文 -
label::before画未选中圆圈：content: ""、position: absolute、left: 0、top: 50%、transform: translateY(-50%) -
input:checked + label::after画对勾：content: "✓"（Unicode 兼容性远好于 SVG 或 background-image） - 对勾的
left和font-size需配合圆圈尺寸微调；若用background-image，得额外设width/height并用background-position居中
移动端点击区域太小怎么办？
只靠文字区域响应点击，手指容易点不准。不能给 input 加 padding（无效），也不能无节制扩大 label 的 padding（破坏布局流）。
- 给
label::before加pointer-events: none，确保点击穿透到真实input - 用
label自身的min-height或padding-top/padding-bottom扩展可触区域，iOS 推荐最小min-height: 44px - 更稳妥的做法：外层套一个
<div class="radio-group">，统一设min-height和line-height
卡片式单选按钮怎么实现？
把每个选项做成带边框、圆角、悬停反馈的卡片，适合问卷或设置页。核心是利用 input:checked + label 触发整体样式变化。
-
input[type="radio"] { position: absolute; opacity: 0; }（不可见但可交互） -
label设display: block、padding、border-radius、border -
input:checked + label改背景色、阴影或图标状态 - 避免用
appearance: none直接作用于input—— 它在 Safari 旧版不生效，且会砍掉聚焦/空格切换等行为
复杂点不在样式本身，而在保持原生交互能力的同时让视觉完全脱胎换骨。每一步隐藏、定位、关联都得严丝合缝，差一点，键盘用户或读屏软件就掉链子。
