单选按钮组用css实现按钮式外观的核心是隐藏原生radio、用label承接点击、伪元素模拟状态；需确保name一致、label正确关联、用:checked+label控制样式，并兼顾可访问性与移动端适配。
单选按钮组如何用 CSS 实现按钮式外观
原生 <input type="radio"> 默认是小圆点，要变成带边框、可点击区域更大的按钮样式，核心不是改 JS 逻辑，而是隐藏原生控件 + 用 <label></label> 承接点击 + 用伪元素模拟状态。关键在于把视觉和行为解耦。
常见错误是直接给 input 加 display: none 后忘了绑定 label[for] 或没写 input 的 name，导致无法互斥；或者只改了未选中态，漏掉 :checked 对应的 ::after 样式。
-
input必须有相同name值，否则不构成单选组 -
label要通过for属性或包裹input来建立关联 - 用
input[type="radio"]:checked + label::before控制选中态样式最稳妥（避免依赖兄弟选择器顺序） - 按钮宽度建议用
flex布局均分，避免inline-block因空格产生间隙
用 :checked 伪类控制按钮高亮状态
不能靠 JS 监听 click 后手动加 class，那样破坏表单语义、影响可访问性（如键盘 Tab 切换后无法看到焦点态），也增加维护成本。CSS 的 :checked 是唯一能准确反映真实选中状态的原生钩子。
容易踩的坑：在 Safari 中，如果 label 没正确关联 input，:checked + label 选择器会失效；另外，部分旧版 Android WebView 不支持 input:checked + label::before，需降级为 label > input:checked 结构并把样式写在 label 上。
示例结构：
<input type="radio" name="theme" id="light"><label for="light">明亮</label> <input type="radio" name="theme" id="dark"><label for="dark">深色</label>
对应关键 CSS：
input[type="radio"] { display: none; }
input[type="radio"] + label {
padding: 8px 16px;
border: 1px solid #ccc;
border-radius: 4px;
cursor: pointer;
}
input[type="radio"]:checked + label {
background: #007bff;
color: white;
border-color: #007bff;
}
让按钮组支持键盘操作与屏幕阅读器
仅靠鼠标点击的按钮组对残障用户不友好。原生 radio 天然支持 Tab 切换、Space 键选中，但前提是不能用 display: none 彻底移除其渲染流——得用视觉隐藏而非移除。
- 替换
display: none为position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; -
label必须有tabindex="0"才能被键盘聚焦（原生label默认不可聚焦） - 给
label加role="radio"和aria-checked="true/false"，并在 JS 中同步更新（若需动态控制） - 整个按钮组外层加
role="radiogroup"和aria-label描述用途
移动端点击区域太小怎么办
默认 label 点击区就是文字大小，在手机上极易误点。不能简单放大字体，而应扩大可点击的 padding 区域，并确保不破坏布局流。
实操建议：
- 用
padding扩展label内部空间，配合box-sizing: border-box - 避免用
min-width强制拉宽，会导致文字换行错乱；改用flex: 1让按钮自动均分容器宽度 - 在 iOS 上，
label需要-webkit-tap-highlight-color: transparent消除点击灰斑 - 如果按钮组横向放不下，用
flex-wrap: wrap并设max-width限制单个按钮宽度
真正难的是在保持表单语义、可访问性、视觉一致性三者之间找平衡——比如加了 aria-checked 就得配 JS 同步，但又不能因此放弃纯 CSS 方案。多数项目卡在这一步，不是不会写样式，而是不敢动底层交互契约。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
