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