如何修改Bootstrap下拉按钮切换时的背景颜色？

要修改下拉按钮切换状态（展开下拉菜单时）的背景颜色，需要覆盖Bootstrap对按钮展开状态和点击/聚焦状态的内置样式，具体操作如下：

1. 明确触发默认样式的状态 #

Bootstrap 5中，下拉按钮在以下场景会触发默认灰色背景：

• 按钮被点击时的:active状态
• 按钮获得焦点时的:focus状态
• 下拉菜单展开时，按钮会被自动添加.show类

2. 编写自定义CSS覆盖默认样式 #

借助你已有的自定义类buttonForProfile，结合上述状态编写CSS，确保自定义背景色的优先级高于Bootstrap内置样式：

/* 覆盖按钮点击、聚焦状态的背景色 */
.buttonForProfile:focus,
.buttonForProfile:active {
  background-color: #你的自定义颜色值 !important;
  /* 可选：同步修改边框色，保持样式统一 */
  border-color: #你的自定义颜色值 !important;
}

/* 覆盖下拉展开时按钮的背景色 */
.buttonForProfile.show {
  background-color: #你的自定义颜色值 !important;
  border-color: #你的自定义颜色值 !important;
}

补充说明 #

• 如果你的自定义CSS文件是在Bootstrap CSS之后引入的，也可以去掉!important，但保留它能更稳妥地确保样式生效。
• 将#你的自定义颜色值替换为实际使用的颜色（比如#2c3e50、rgb(44,62,80)或颜色名称）。
• 若需要hover状态样式保持一致，可额外添加.buttonForProfile:hover的规则。

示例（自定义背景为深蓝色） #

.buttonForProfile:focus,
.buttonForProfile:active,
.buttonForProfile.show,
.buttonForProfile:hover {
  background-color: #2c3e50 !important;
  border-color: #2c3e50 !important;
}

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