javascript - 单击使用 CSS 后如何更改 Bootstrap 标签背景颜色？

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 都会添加一个名为“btn-default.active”的类。所以你需要通过使用上面的 css 来改变背景来覆盖那个类。