单击时的引导按钮显示默认颜色 [英] bootstrap button on click showing default colour

问题描述

我正在尝试使用以下代码设置按钮颜色的样式，直到单击按钮后颜色才起作用，按钮显示默认颜色，如何指定按钮onclick的颜色？

I am trying to style the button colour with below code, the colours work until I click the button, the button shows the default colours, how do I specify the colours of the button 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; 
}

推荐答案

：active 选择器是单击所需要的。

The :active selector is what you need for the click.

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

看起来像上面一样，所以如果您仍然看到略有不同的颜色，则很可能是因为 box-shadow （也应用于活动按钮状态）。像这样禁用它：

It looks like you have that above so if you are still seeing a slightly different color it is most likely because of the box-shadow that is also applied to the active button state. Disable that like so:

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

编辑：
覆盖CSS的选择器实际上是 btn-success：active：focus 。因此，您需要在CSS中添加以下内容：

The selector that is overriding your css is actually btn-success:active:focus. So you will need to add the following to your css:

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

在下面我的评论中，您最好创建自己的类，例如作为 btn-custom ，您可以在其中应用所需的样式。将此与现有的 btn 类结合使用，由于不需要重写现有的选择器，因此可以用更少的代码来实现所需的结果。

Further to my comment below, you would be better off creating your own class such as btn-custom to which you can apply your desired styles. Combining this with the existing btn class, you can achieve your desired result with much less code as you won't need to override existing selectors.

这篇关于单击时的引导按钮显示默认颜色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！