CSS 单击时显示默认颜色的引导程序按钮

bootstrap button on click showing default colour

提问by user3312792

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?

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

回答by Guy

The :activeselector is what you need for the click.

该:active选择是你所需要的点击。

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

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-shadowthat is also applied to the activebutton state. Disable that like so:

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

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

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

编辑：覆盖您的 css 的选择器实际上是btn-success:active:focus. 因此，您需要将以下内容添加到您的 css 中：

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

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

除了我在下面的评论之外，您最好创建自己的类，例如btn-custom您可以应用所需样式的类。将其与现有btn类相结合，您可以用更少的代码实现您想要的结果，因为您不需要覆盖现有的选择器。

回答by xxxbence

You have to use the !importantdeclaration to do that correcly.

你必须使用!important声明来正确地做到这一点。

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

回答by Bill Brock

Some inspiration from the bootstrap sourcefor overriding these various button states where $off-white and $brand-black are defined by us:

来自引导源的一些灵感，用于覆盖我们定义的这些不同的按钮状态，其中 $off-white 和 $brand-black 是：

.btn-success {
  &:hover,
  &:focus,
  &.focus {
    color: $off-white;
    background-color: $brand-black;
  }

  &:active,
  &.active,
  &.disabled,
  &:disabled {
    color: $off-white;
    background-color: $brand-black;

    &:focus,
    &.focus {
      color: $off-white;
      background-color: $brand-black;
    }
  }
}

回答by Reuven Etzion

That button press animation of the default color is due to the background image. Use this for each named style (btn-default, btn-success, etc):

默认颜色的按钮按下动画是由于背景图像。对每个命名样式（btn-default、btn-success 等）使用它：

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

回答by colemerrick

If you are working on a personal project, and not with a team, it is worth noting that you can override pseudo class styles simply by applying "!important" to the same style declarations on the class:

如果您正在处理个人项目，而不是与团队一起工作，则值得注意的是，您可以通过将“!important”应用于类上的相同样式声明来覆盖伪类样式：

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

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

Generally, it's a good idea to stay away from !important because this will override any and all color, background-color and border-color style declarations on the btn-success class (unless you override the style declarations again with !important later in your style sheet although that's ridiculous).

通常，远离 !important 是个好主意，因为这将覆盖 btn-success 类上的任何和所有颜色、背景颜色和边框颜色样式声明（除非您稍后再次使用 !important 覆盖样式声明）样式表虽然这很荒谬）。

If the goal is the smallest file size possible though and you are using this class everywhere in the same way - meaning no inline styles - then this may be your best option.

如果目标是尽可能最小的文件大小，并且您以相同的方式在任何地方使用此类 - 意味着没有内联样式 - 那么这可能是您的最佳选择。

Alternatively, but using the same thinking, you may try naming a new custom class something like .btn-success-important, and only apply it after btn-success where you need to use the override.

或者，但使用相同的想法，您可以尝试命名一个新的自定义类，例如 .btn-success-important，并且仅在需要使用覆盖的 btn-success 之后应用它。

There is one catch though: If you are combining .btn-success or your .btn-success-important with any other Bootstrap .btn-group, !important will override any pseudo class style declared within. In this case you may be better off with Guy's answer (the custom class without !important style declarations).

不过有一个问题：如果您将 .btn-success 或 .btn-success-important 与任何其他 Bootstrap .btn-group 结合使用，!important 将覆盖其中声明的任何伪类样式。在这种情况下，使用 Guy 的答案（没有 !important 样式声明的自定义类）可能会更好。

回答by Amanjot Kaur

Just add the following code in your CSS

只需在您的 CSS 中添加以下代码

.btn-success.active.focus, .btn-success.active:focus, .btn-success.active:hover, .btn-success:active.focus, .btn-success:active:focus, .btn-success:active:hover, .open>.dropdown-toggle.btn-success.focus, .open>.dropdown-toggle.btn-success:focus, .open>.dropdown-toggle.btn-success:hover
{
color: #fff;
background-color: #161617; 
border-color: #494F57; 
}