Javascript 使用CSS单击后如何更改引导标签背景颜色？

引导HTML页面内容包括新娘和新郎的性别选择。当页面加载时，btn组的

然后鼠标点击（在brides按钮上）并按如下所示松开btn组的鼠标。背景颜色被改变了，我尝试使用

css

将背景颜色改为红色。但不起作用。单击后是否可以使用

css

更改引导默认标签背景颜色

CSS

HTML

新娘
新郎

您可以尝试使用以下css：

.btn-default.active{
  background-color: red!important;
}

演示：

---

说明：每次单击按钮时，引导程序都会添加一个名为“btn default.active”的类。因此，您需要通过使用上述css来更改背景来覆盖该类。

在这种情况下，您可以创建自己的类及其必要的行为，而不是覆盖默认引导的样式：

<label class="btn btn-custom gender-label">

.btn-custom:hover,
.btn-custom.active,
.btn-custom.active:hover {
  background-color: red;
}

.btn自定义：悬停，
.btn-custom.active，
.btn自定义。活动：悬停{
背景色：红色；
}

---

你可以检查一下

请检查下面我的解决方案。如果上面的解决方案解决了您的问题，请将其标记为答案。非常感谢。

.btn-default.active{
  background-color: red!important;
}

<label class="btn btn-custom gender-label">

.btn-custom:hover,
.btn-custom.active,
.btn-custom.active:hover {
  background-color: red;
}