更改引导按钮和下拉切换的颜色答案

【问题标题】：Changing colors on bootstrap buttons and dropdown-toggle更改引导按钮和下拉切换的颜色
【发布时间】：2016-11-23 19:09:04
【问题描述】：

我有一个按钮组如下：

HTML

<div class="btn-group">
   <button type="button" class="btn btn-default btn-xs  red-outline-button"> Sync </button>
   <button type="button" class="btn btn-default btn-xs  gold-outline-button" data-toggle="dropdown">New PG </button>
  <ul class="dropdown-menu">
    <li><a href="#"> Test1</a></li>
    <li><a href="#"> Test2</a></li>
</ul>
</div>

CSS：

.red-outline-button:hover {
  border-color: #C4213C;
  background-color: #f8d3d9;
  color: #000
}

.gold-outline-button:hover {
  border-color: #B3892F;
  background-color: #f4ebd7;
  color: #000;
}

以上工作。当我将鼠标悬停在按钮上时，颜色会发生变化。但是，当我单击并按住或单击第二个按钮以显示下拉菜单时，颜色会切换回默认灰色。

我试过.red-outline-button:active，但没有帮助。

我的问题是，在以下情况下设置 css 颜色的正确方法是什么：

按钮被按下
下拉菜单已打开（只有按钮。我不需要设置实际下拉菜单的样式

【问题讨论】：

"当我单击并按住或单击第二个按钮时... ...我尝试过.red-outline-button:active..."：您的 second 按钮没有有.red-outline-button 类。
@JamesDonnelly 不是，但在 CSS 中我们可以看到.gold-outline-button:hover，这是第二个使用的。所以实际上是一样的，当两者都明确发布时，说他尝试了这两种方法是没有意义的。
@GillesC OP 暗示 第二个 按钮是问题所在，而不是第一个。
@JamesDonnelly 也许是这样，但这不会使问题变得混乱，因为问题显然是如何覆盖按钮的默认样式并尝试为发布的两个按钮执行此操作。跨度>
我的回答对您有帮助吗？ :)

标签： html css twitter-bootstrap

【解决方案1】：

您需要覆盖默认 Bootstrap 类：

 .btn-default.focus, .btn-default:focus

如果您不想覆盖所有内容，这将起作用：

.gold-outline-button:hover, .gold-outline-button.focus, .gold-outline-button:focus {
  border-color: #B3892F;
  background-color: #f4ebd7;
  color: #000;
}

工作演示：http://www.bootply.com/Li7tkXlF9P

希望对您有所帮助。 :)

【讨论】：

【解决方案2】：

只需将 .gold-outline-button:focus 添加到选择器和 !important 样式即可覆盖默认的 Bootstrap 样式。

例如

.gold-outline-button:hover, .gold-outline-button:focus {
  border-color: #B3892F !important;
  background-color: #f4ebd7 !important;
  color: #000 !important;
}

这应该可以解决这两个问题。在此处查看实际操作：https://jsfiddle.net/sytc4pc5/

【讨论】：

Eww。 !important 在这里完全没有必要。
你在水晶球中看到 OP 加载 css 文件的顺序了吗？
CSS 文件的顺序并不重要。这一切都归结为Specificity。

【解决方案3】：

这将解决它单击是另一个事件不会采用悬停属性

 .red-outline-button:hover,.red-outline-button:active,.red-outline-button:focus {
      border-color: #C4213C;
      background-color: #f8d3d9;
      color: #000
    }

    .gold-outline-button:hover,.gold-outline-button:active,.gold-outline-button:focus {
      border-color: #B3892F;
      background-color: #f4ebd7;
      color: #000;
    }

【讨论】：