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

我正在尝试使用下面的代码设置按钮颜色的样式，颜色在我单击按钮之前一直有效，按钮显示默认颜色，如何指定按钮 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; 
}

The :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类，您可以用更少的代码实现您想要的结果，因为您不需要覆盖现有的选择器。