admin管理员组

文章数量:1317123

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>
Share Improve this question asked Apr 9, 2016 at 6:26 Geeth WelagedaraGeeth Welagedara 6141 gold badge8 silver badges25 bronze badges 1
  • please check my solution below. – somprabhsharma Commented Apr 9, 2016 at 6:50
Add a ment  | 

2 Answers 2

Reset to default 4

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!

本文标签: javascriptHow to change bootstrap label background color after click using CSSStack Overflow