Question

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

.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;
}

Answer 3

只需在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; 
}

Answer 4

来自bootstrap source的一些灵感来覆盖这些各种按钮状态，其中$ 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;
    }
  }
}

Answer 5

如果您正在处理个人项目，而不是团队，那么值得注意的是，只需将“！important”应用于类的相同样式声明，就可以覆盖伪类样式：

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

一般来说，最好远离！重要因为这将覆盖btn-success类中的任何和所有颜色，背景颜色和边框颜色样式声明（除非你再次使用！important重写样式声明）稍后在你的样式表中虽然这很荒谬）。

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

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

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

Answer 6

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

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

Answer 7

如果要删除矩形阴影，只需添加box-shadown：none使其重要，或者如果要添加矩形阴影，只需添加颜色值即可。

.btn-primary:not(:disabled):not(.disabled):active{
    color: #fff;
    background-color: #5b5fc6;
    border-color: #5b5fc6;
    box-shadow: none !important;
}

或

.btn-primary:not(:disabled):not(.disabled):active{
        color: #fff;
        background-color: #5b5fc6;
        border-color: #5b5fc6;
        box-shadow: 0 0 0 0.2rem #c9cbfa !important
    }

Answer 8

我用这个 css 代码修复了这个行为：

.btn-primary {
    background-color: #8ed3cc;
    border: 0 !important;
    padding: 1rem 5rem;
    border-radius: 0;
    font-family: 'Lato', sans-serif;
    font-size: 1.2rem;
    box-shadow: none !important;
}
.btn-primary:hover {
    background-color: #69aca5 !important;
    border: 0 !important;
    box-shadow: none !important;
 }
 .btn-primary:focus {
    background-color: #69aca5 !important;
    border: 0 !important;
    box-shadow: none !important;
 }

单击“自举按钮”显示默认颜色

8 个答案: