Bootstrap 5复选框按钮悬停失效与自定义颜色点击问题求助

1. 恢复btn-outline-primary的hover效果 #

Bootstrap默认给btn-outline-primary定义了hover样式，没生效大概率是自定义CSS覆盖了默认样式。检查是否有强制设置hover状态background-color为透明的代码，有的话直接删除；如果是优先级问题，重新写hover样式增强优先级：

.btn-outline-primary:hover {
  color: #fff;
  background-color: #0d6efd;
  border-color: #0d6efd;
}

2. 让自定义btn-red点击后有颜色变化 #

按钮点击时会触发:active状态，若作为单选/复选框的配套按钮，选中后还会添加.active类。给btn-red补上这两个状态的样式即可：

.btn-red:active,
.btn-red.active {
  color: #fff;
  background-color: #dc3545;
  border-color: #dc3545;
}

3. 解决btn-red + btn-outline-primary点击后变蓝的问题 #

这是因为btn-outline-primary的active状态样式优先级高于btn-red，用更具体的选择器覆盖即可：

.btn-red.btn-outline-primary:active,
.btn-red.btn-outline-primary.active {
  color: #fff;
  background-color: #dc3545;
  border-color: #dc3545;
}

关于btn-outline-danger选中显示红色 #

Bootstrap自带的btn-outline-danger已经包含完善的选中/点击状态样式，直接使用该类即可。如果需要微调，参照上述写法修改它的:active和.active状态样式就行。

内容的提问来源于stack exchange，提问作者tb189