Question

目前我正在使用以下内容：这样就改变了正常的背景颜色和悬停状态颜色，但当我点击一个按钮时，它变成浅蓝色（即活动状态）我错过了什么？

＆＃13;

.btn-primary{
    font-family: TimeBurner;
    font-size: 15px;
    background-color: #232323;
    border-color: #222222;
}
.btn-primary:hover{
    background-color: #111111;
    border-color: #000000;
}
.btn-primary.active, .btn-primary:active{
    background-color: #111111;
	border-color: #000000;
}

＆＃13;

 <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<div class="row">
  <div class="col-md-3 text-center">
      <button type="button" class="btn btn-primary" ng-click="getRatePerKGAir()">
          Rate/KG Air
      </button>
  </div>
  <div class="col-md-3 text-center">
      <button type="button" class="btn btn-primary" ng-click="getRatePerKGSurface()">
          Rate/KG Surface
      </button>
  </div>
  <div class="col-md-3 text-center">
      <button type="button" class="btn btn-primary" ng-click="getSalienceAir()">
          Salience Air
      </button>
  </div>
  <div class="col-md-3 text-center">
      <button type="button" class="btn btn-primary" ng-click="getSalienceSurface()">
          Salience Surface
      </button>
  </div>
</div>

＆＃13;

Answer 1

您也需要定位.btn-primary:focus。 .btn-primary:focus负责在点击后对按钮#3276b1进行着色：

.btn-primary:focus,
.btn-primary:active,
.btn-primary.active {
    background-color: #111111;
    border-color: #000000;
}

然后它起作用 - ＆gt;的 http://jsfiddle.net/y5jo73wo/

Answer 2

你的CSS代码中的

添加了这个

.btn-primary:active:hover{
    background-color: red;
    border-color: red;}

当我使用bootstrap时如何更改活动按钮的背景颜色？

2 个答案: