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

Question

Bootstrap HTML页面内容性别选择作为新娘和新郎。页面加载时btn-group如下

然后单击鼠标（在新娘按钮上）并释放鼠标btn-group，如下所示。背景颜色已更改，我尝试使用css更改为红色。但没有工作。使用css点击后是否有可能更改Bootstrap默认标签背景颜色？

CSS

.gender-label:active { background-color: red;} 

HTML

<li>
  <div class="btn-group" data-toggle="buttons">
    <label class="btn btn-default gender-label">
      <input type="radio" name="options" id="option1" autocomplete="off">
      <span>Bride</span>
    </label>
    <label class="btn btn-default gender-label">
      <input type="radio" name="options" id="option2" autocomplete="off">
      <span>Groom</span>
    </label>
  </div>
</li>

Answer 1

您可以尝试使用以下css：

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

演示：http://codepen.io/somprabhsharma/pen/ZWvZxb

说明：Bootstrap添加了一个名为＆＃34; btn-default.active＆＃34;的类。每当你点击按钮。所以你需要通过使用上面的css来改写背景来覆盖那个类。

Answer 2

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

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

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

JSFiddle-example 你可以检查一下！