需用 input[type="radio"]:checked + label.btn 选择器手动添加边框和阴影，并确保 HTML 结构严格相邻、无空格；深色模式下需提高 box-shadow 的 alpha 值并调整颜色。
怎么让 Bootstrap 5.3 的单选按钮有明显选中态
bootstrap 5.3 默认移除了 .btn:active 和 .btn:focus 的阴影与边框，所以用 btn-check + label.btn 做的单选按钮，点完毫无视觉反馈——不是你写错了，是它真没样式。
必须靠 CSS 主动加：利用 input[type="radio"]:checked + label.btn 这个相邻兄弟选择器，精准定位「真正被选中的那个按钮」。
- 结构必须严格是
<input type="radio"><label class="btn">…</label>，中间不能有空格、换行或注释，否则+失效 - 别用
:active，它只在鼠标按下瞬间触发，松开就没了，根本留不住“已选中”状态 - 推荐直接加边框和聚焦环：
border: 2px solid #0d6efd+box-shadow: 0 0 0 3px rgba(13, 110, 253, 0.25)，和 Bootstrap 官方 focus-ring 逻辑一致
要不要用 Awesome Bootstrap Checkbox 这类第三方库
如果你只需要基础圆点变色、带图标、禁用态统一，又不想手写一堆 CSS，awesome-bootstrap-checkbox 是个省事选择——纯 CSS、无 JS、支持 Font Awesome 图标、适配 Bootstrap 5。
但它也有代价：
- 引入额外 CSS 文件（约 8KB），增加一次 HTTP 请求
- 所有样式都走
.abc-checkbox类体系，和原生.btn按钮风格不兼容，不能混用 - 深色模式需手动覆盖变量，它本身不自动响应
@media (prefers-color-scheme: dark)
简单场景够用；复杂交互（比如按钮要带间距、栅格布局、动态切换颜色）反而不如自己写几行 CSS 灵活。
React 项目里怎么避免内联 style 写法
别在 JSX 里写 style={{ border: '2px solid #0d6efd' }} ——既难维护，又破坏组件抽象，还容易漏掉未选中态还原逻辑。
- 纯 CSS 方案最干净：把规则写进
.module.css或全局样式表，React 组件只管结构 - 确保 HTML 结构中每个
input都有唯一id，对应label的htmlFor，这是:checked + label能生效的前提 - 如果要用 CSS-in-JS（如 Emotion），也优先用 class 名映射，而不是硬编码样式值
深色模式下怎么保持边框/阴影可见
默认的 rgba(13, 110, 253, 0.25) 在深背景上可能发灰甚至看不见，得单独适配。
直接加媒体查询即可：
input[type="radio"]:checked + label.btn {
border: 2px solid #0d6efd;
box-shadow: 0 0 0 3px rgba(13, 110, 253, 0.25);
}
@media (prefers-color-scheme: dark) {
input[type="radio"]:checked + label.btn {
border-color: #4dabf7;
box-shadow: 0 0 0 3px rgba(77, 171, 247, 0.3);
}
}
关键不是换颜色，而是调高 alpha 值（比如从 0.25 → 0.3）并选更亮的主题色——否则阴影一到深色背景就“隐身”。
最常被忽略的是结构顺序和媒体查询的 alpha 值微调。其它都能查文档搞定，但这俩一错，样式就完全不生效，连 debug 都找不到原因。
