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

Posted 2023-02-23

【中文标题】单击时显示默认颜色的引导按钮

【英文标题】：bootstrap button on click showing default colour

【发布时间】：2015-10-01 11:16:40

【问题描述】：

我正在尝试使用以下代码设置按钮颜色的样式，颜色在我单击按钮之前有效，按钮显示默认颜色，如何在单击时指定按钮的颜色？

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

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

【讨论】：

它变为绿色成功颜色，我已将问题中的代码更新为 btn-success，我应该从头开始创建新按钮而不是尝试覆盖成功按钮吗？

我已经更新了我的答案，因为我发现了一个覆盖选择器。关于从头开始创建新按钮，最好创建一个 btn-custom 类并添加您想要的样式，因为这不需要覆盖，但仍然受益于标准 btn 类

【参考方案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; 

【参考方案3】：

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

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

【讨论】：

!important 为我做了。出于某种原因，鼠标按下按钮仍使用默认样式。

!important 是实现目标的最便宜和最快的方法，但问题是，在以后进一步使您的样式复杂化后，这会很快变得混乱，没有 !even-more-important

@Prof83，对！此时，您只需开始向所有内容添加 !important 并向现有选择器添加额外的不需要的 ID 和类选择器以提高特异性，然后开始内联 CSS，这种方法可能有什么问题。 ?

我还必须为 .btn-success:focus 添加一个 box-shadow 属性以及 !important。

【参考方案4】：

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

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

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

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

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

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

【参考方案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;
    
  

【参考方案6】：

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

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

【参考方案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
    

【参考方案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;
 

【参考方案9】：

要在单击按钮时触发任何类，您需要:active 选择器并修复单击时引导按钮的默认行为，您需要将background-color 设置为您想要的任何颜色以及@987654323 @。然后它将覆盖引导类的默认样式。

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