bootstrap 5 默认禁用了按钮的 :active 和 :focus 阴影样式，若需为选中的 radio 按钮（如 btn-check + label.btn 组合）添加视觉反馈（如边框或阴影），可通过 css 相邻兄弟选择器精准定位已勾选状态并自定义样式。
bootstrap 5 默认禁用了按钮的 :active 和 :focus 阴影样式，若需为选中的 radio 按钮（如 btn-check + label.btn 组合）添加视觉反馈（如边框或阴影），可通过 css 相邻兄弟选择器精准定位已勾选状态并自定义样式。
在 Bootstrap 5 中，btn-check 是一套基于原生 的无障碍按钮实现机制：隐藏真实 radio 输入框，通过 + label 关联可见的
✅ 正确的 CSS 方案（推荐）
将以下 CSS 添加至你的样式表（如 App.css 或全局样式文件）中：
/* 为已选中的 radio 对应的 label.btn 添加边框和/或阴影 */ input[type="radio"]:checked + label.btn { border: 2px solid #0d6efd; /* 蓝色主色边框，可按需调整 */ box-shadow: 0 0 0 3px rgba(13, 110, 237, 0.25); /* Bootstrap 风格焦点阴影 */ }? 为什么用 + 而不是 ~？
+ 表示「紧邻的下一个兄弟元素」，确保只影响直接跟在 后的
? 在 React 组件中应用（无需内联 style）
你无需修改 JSX 中的 style={{…}} —— 内联样式无法响应 :checked 状态（React 不会动态更新 dom 属性以触发伪类）。保持原有结构即可：
<div className="row"> <h4>Choose buffer</h4> </div> <div className="row"> <div className="col-sm-4 p-3 d-flex justify-content-center"> <input type="radio" className="btn-check" name="chooseBuffer" id="buffer1" autoComplete="off" onChange={() => measurementConfig.buffer = 1} /> <label className="btn btn-lg btn-warning" htmlFor="buffer1"> <span className="bi-database-add"></span> Buffer 1 </label> </div> {/* buffer2, buffer3 同理，无需额外 class 或 style */} </div>✅ 注意：将 onClick 改为 onChange 更符合表单控制规范（尤其在受控组件中），且能更好兼容键盘操作（空格/回车切换）。
⚠️ 注意事项与进阶建议
- 不要覆盖 .btn:focus：Bootstrap 5 已移除默认 box-shadow，但保留了 :focus-visible 以支持键盘导航。若强制添加 :focus 样式，可能破坏可访问性。优先使用 :checked + label 方案。
- 颜色适配性：若按钮使用 btn-warning / btn-success 等主题色，建议让边框/阴影色与按钮主色协调（例如 btn-success 可用 #198754 边框）。
- 移动端兼容性：该方案在 ios safari 和 android chrome 中均稳定生效，无需 -webkit-appearance 修复。
- 批量定制？ 如需差异化样式（如仅对 btn-info 添加阴影），可扩展选择器：
input[type="radio"]:checked + label.btn-info { box-shadow: 0 0 0 3px rgba(13, 110, 237, 0.25); }
✅ 总结
为 Bootstrap 5 的 btn-check 按钮添加“已选中”视觉反馈，核心在于理解其基于原生表单控件的设计逻辑：利用 :checked + label 选择器替代失效的 :active，通过纯 CSS 实现轻量、可访问、跨浏览器一致的样式增强。无需 JavaScript 干预，不破坏 Bootstrap 的语义结构，是符合现代前端最佳实践的标准解法。