如何移除Bootstrap 5.3手风琴展开时的蓝色背景与边框

直接用下面这段CSS覆盖Bootstrap的默认样式即可，注意要把这段代码放在Bootstrap样式文件之后引入，保证样式优先级足够：

/* 清除展开状态下的蓝色背景 */
.accordion-button:not(.collapsed) {
  background-color: transparent; /* 换成你想要的背景色也可以 */
  border-color: transparent; /* 去掉展开时的边框颜色 */
}

/* 移除按钮聚焦时的蓝色边框和阴影 */
.accordion-button:focus {
  box-shadow: none;
  border-color: transparent; /* 可选，要是想去掉聚焦时的边框就加上 */
}

/* 针对Flush样式手风琴，确保展开时按钮底部无多余边框 */
.accordion-flush .accordion-button:not(.collapsed) {
  border-bottom: none;
}

简单说明：

• .accordion-button:not(.collapsed) 是手风琴按钮处于展开状态的选择器，直接修改背景色和边框色为透明（或自定义颜色）就能覆盖默认蓝色样式。
• 不少情况下的蓝色边框其实是按钮聚焦时的阴影效果，所以需要给.accordion-button:focus清除box-shadow。
• 你的代码用了Flush类型的手风琴（含flush相关类名），最后一段可以避免展开时按钮底部出现多余边框。

把这段CSS加到你的项目里，就能解决问题了。

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