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

Bootstrap HTML page contents gender selection as brides and grooms . The when the page is loaded btn-group as follows

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

Then the mouse clicked (on brides button) and release mouse the btn-group as follows. The background color was changed and i tried to change in to red using css. but not working. Is there any possibility to change Bootstrap default label background color after clicking, using css?

然后单击鼠标(在新娘按钮上)并按如下方式释放鼠标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>

2 个解决方案

#1

Instead of overwriting default Bootstrap's styles, in this case you can create your own class and its necessary behavior:

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

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

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

JSFiddle-example You can check it!

JSFiddle-example您可以查看它!

#2

You can try using following css:

您可以尝试使用以下css:

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

Demo: http://codepen.io/somprabhsharma/pen/ZWvZxb

Explanation: Bootstrap adds a class named "btn-default.active" whenever you click on the button. So you need to override that class by using above css to change the background.

说明:只要单击按钮,Bootstrap就会添加一个名为“btn-default.active”的类。所以你需要通过使用上面的css来改写背景来覆盖那个类。

#1