Bootstrap 5.3 默认禁用按钮激活态的阴影和边框样式，需通过 CSS 选择器精准定位已选中的 radio 按钮对应的 label 标签，并为其添加 border 或 box-shadow 样式。
bootstrap 5.3 默认禁用按钮激活态的阴影和边框样式，需通过 css 选择器精准定位已选中的 radio 按钮对应的 label 标签，并为其添加 `border` 或 `box-shadow` 样式。
在 Bootstrap 5.3 中，.btn-check 隐藏的 radio 输入与 .btn 标签通过 for/id 关联，其视觉激活状态（如“按下”或“选中”）并不自动触发 .btn 的 :active 或 :focus 伪类——因为实际焦点/选中状态落在 上，而
✅ 正确的 CSS 方案
将以下 CSS 添加到你的样式文件（如 App.css 或全局样式作用域中），即可为所有被选中的 radio 对应的按钮添加边框或阴影：
/* 为已选中的 radio 后紧跟的 .btn 标签添加样式 */
input[type="radio"]:checked + label.btn {
border: 2px solid #0d6efd; /* 蓝色实线边框，可按需调整 */
box-shadow: 0 0 0 3px rgba(13, 110, 237, 0.25); /* Bootstrap 风格聚焦阴影 */
}? 原理说明：input:checked + label.btn 表示「紧邻已勾选 radio 元素之后的、且具有 btn 类的 label 标签」。由于你的 HTML 结构中 和
?️ 在 React 组件中应用（推荐方式）
无需内联 style={{}}（它无法响应动态状态变化），直接复用上述 CSS 规则即可生效。你现有的 JSX 无需修改，仅需确保样式已加载：
// 示例：保持原有结构，CSS 自动生效
<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" />
<label className="btn btn-lg btn-warning" htmlFor="buffer1">
<span className="bi-database-add"></span> Buffer 1
</label>
</div>
{/* buffer2, buffer3 同理... */}
</div>✅ 优势：
- 零 JS 逻辑耦合：纯 CSS 响应，性能高、可维护性强；
- 支持所有主题色：.btn-warning/.btn-success 等均自动适配；
- 无障碍友好：保留原生 radio 语义，屏幕阅读器可正确识别选中状态。
⚠️ 注意事项与进阶建议
- 避免使用 !important：若样式未生效，请检查 CSS 加载顺序或是否被更高优先级规则覆盖（如 label.btn:focus）。可通过浏览器 DevTools 的「Computed」面板验证匹配的选择器。
-
如需差异化样式：可为不同按钮添加自定义类（如 label-buffer-1），再扩展选择器：
input#buffer1:checked + label.label-buffer-1 { box-shadow: 0 0 0 3px rgba(255, 193, 7, 0.4); } - 兼容性提示：:checked + label 在所有现代浏览器（含 IE9+）中均受支持，无兼容风险。
✅ 总结
Bootstrap 5.3 的按钮激活态视觉反馈需借助表单控件的底层状态（如 :checked）驱动，而非依赖 .btn.active 类（该类需手动切换，不适用于原生 radio）。掌握 :checked + label 这一模式，不仅能解决本例的阴影/边框需求，还可延伸用于自定义开关、单选组高亮、表单验证反馈等场景——简洁、标准、可持续。
