单击引导按钮显示默认颜色

Question

我试图用下面的代码设置按钮颜色的样式,颜色一直工作,直到我点击按钮,按钮显示默认颜色,如何指定按钮onclick的颜色？

.btn-success { 
 color: #ffffff; 
 background-color: #161617; 
 border-color: #494F57; 
} 

.btn-success:hover, 
.btn-success:focus, 
.btn-success:active, 
.btn-success.active, 
.open .dropdown-toggle.btn-success { 
 color: #ffffff; 
 background-color: #1F2838; 
 border-color: #494F57; 
} 

.btn-success:active, 
.btn-success.active, 
.open .dropdown-toggle.btn-success { 
 background-image: none; 
} 

.btn-success.disabled, 
.btn-success[disabled], 
fieldset[disabled] .btn-success, 
.btn-success.disabled:hover, 
.btn-success[disabled]:hover, 
 fieldset[disabled] .btn-success:hover, 
.btn-success.disabled:focus, 
.btn-success[disabled]:focus, 
fieldset[disabled] .btn-success:focus, 
.btn-success.disabled:active, 
.btn-success[disabled]:active, 
fieldset[disabled] .btn-success:active, 
.btn-success.disabled.active, 
.btn-success[disabled].active, 
fieldset[disabled] .btn-success.active { 
background-color: #161617; 
border-color: #494F57; 
} 

.btn-success .badge { 
  color: #161617; 
 background-color: #ffffff; 
}

Answer 1

:active选择器是您单击所需的选择.

.btn-sample:active {
  // click styles here
}

它看起来就像你上面那样,所以如果你仍然看到略有不同的颜色,很可能是因为box-shadow它也适用于active按钮状态.禁用它是这样的:

.btn-sample:active {
  box-shadow: none;
}

编辑:实际上覆盖你的CSS的选择器btn-success:active:focus.所以你需要在css中添加以下内容:

.btn-success:active:focus {
  color: #ffffff; 
  background-color: #161617; 
  border-color: #494F57;
}

在下面的评论中,您最好创建自己的类,例如btn-custom您可以应用所需的样式.将此与现有btn类相结合,您可以使用更少的代码实现所需的结果,因为您不需要覆盖现有的选择器.

Answer 2

您必须使用!important声明来正确地执行此操作.

.btn-success:hover, .btn-success:active, .btn-success:focus {
  color: #ffffff !important;
  background-color: #1F2838 !important;
  border-color: #494F57 !important;
}