How to change bootstrap label background color after click using CSS?

Question

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

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 ?

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

You can try using following 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.

Answer 2

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

<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!