Bootstrap 5 默认禁用了按钮的 :active 和 :focus 阴影效果，若需为 Radio 按钮组中被选中的项（如 ）单独添加边框或阴影，可通过 CSS 相邻兄弟选择器 :checked + label 精准定位并样式化。
bootstrap 5 默认禁用了按钮的 :active 和 :focus 阴影效果，若需为 radio 按钮组中被选中的项（如
在 Bootstrap 5 中，.btn-check 隐藏了原生 ，并通过 + label 机制将点击行为与视觉样式解耦——这正是实现「仅高亮当前选中按钮」的关键。由于原生 :active 伪类在点击释放后立即失效，而 :checked 状态持久存在，因此应基于 input:checked + label.btn 进行样式定制，而非依赖 :active。
以下是一个推荐的、语义清晰且可复用的 CSS 方案：
/* 为被选中的 radio 对应的 button label 添加阴影和边框 */
input[type="radio"]:checked + label.btn {
box-shadow: 0 0 0 3px rgba(13, 110, 253, 0.25); /* Bootstrap 主色青蓝的聚焦阴影 */
border: 2px solid #0d6efd; /* 可选：强化边框，增强视觉反馈 */
/* 如需模拟 v5.0 的深色内阴影，可额外添加： */
/* text-shadow: 0 -1px 0 rgba(0,0,0,.2); */
}
/* （可选）提升选中态的 z-index，避免阴影被遮挡 */
input[type="radio"]:checked + label.btn {
position: relative;
z-index: 2;
}? 重要注意事项：
- ✅ 必须确保 与
- ✅ 不要使用 style={{ ... }} 内联样式覆盖 :checked 状态——CSS 伪类无法通过 React 内联样式声明；
- ✅ 若按钮使用了 .btn-outline-* 类，建议统一采用 box-shadow 而非 border，以保持轮廓风格一致性；
- ⚠️ 避免全局重置 .btn:active { box-shadow: ... }，否则会影响所有按钮交互反馈，违背按需定制原则。
最后，在你的 React 组件中，只需将上述 CSS 规则注入
