javascript - How to change bootstrap label background color after click using CSS? - Stack Overflow

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>

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

Share Improve this question Follow asked Apr 9, 2016 at 6:26 Geeth WelagedaraGeeth Welagedara 61411 gold badge88 silver badges2525 bronze badges 1

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

Add a ment  | 

2 Answers 2

Sorted by: 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