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" autoplete="off">
      <span>Bride</span>
    </label>
    <label class="btn btn-default gender-label">
      <input type="radio" name="options" id="option2" autoplete="off">
      <span>Groom</span>
    </label>
  </div>
</li>

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" autoplete="off">
      <span>Bride</span>
    </label>
    <label class="btn btn-default gender-label">
      <input type="radio" name="options" id="option2" autoplete="off">
      <span>Groom</span>
    </label>
  </div>
</li>

• javascript
• jquery
• html
• css
• twitter-bootstrap

• please check my solution below. – somprabhsharma Commented Apr 9, 2016 at 6:50

2 Answers 2

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.

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!