bootstrap 点击按钮显示默认颜色

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

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

Answer 2

只需在您的 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 3

您必须使用 !important 声明才能正确执行此操作。

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

Answer 4

如果您从事的是个人项目，而不是与团队合作，请注意您可以覆盖伪 class 样式，只需将“!important”应用于 class:

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

一般来说，远离 !important 是个好主意，因为这将覆盖 btn-success class 上的所有颜色、背景颜色和边框颜色样式声明（除非你覆盖稍后在您的样式 sheet 中再次使用 !important 再次声明样式，尽管这很荒谬）。

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

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

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

Answer 5

来自 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 6

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

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

Answer 7

如果你想删除 box-shadow 只需添加 box-shadown:none 并使其重要，或者如果你想添加 box-shadows 只需添加颜色值。

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

Answer 9

要在单击按钮时触发任何 class，您需要 :active 选择器并修复单击时 bootstrap 按钮的默认行为，您需要设置 background-color 到您想要的任何颜色以及 !important。然后它将覆盖 bootstrap class.

的默认样式

.btn-outline-primary:active{ background-color: [your color] !important}

bootstrap 点击按钮显示默认颜色

bootstrap button on click showing default colour

css

colors

button

twitter-bootstrap