引导按钮活动颜色更改 [英] Bootstrap Button active color change

问题描述

我正在使用引导按钮类，更具体地说是以下内容：

I'm using the bootstrap button class, more specifically the following :

<button type="button" class="btn btn-success navbar-btn">Login</button>

现在，颜色显示为绿色就可以了。每次单击该按钮时，该按钮都会变为深绿色。我想要做的是使按钮不会更改颜色，而只是保留默认的引导程序颜色，并删除其周围的蓝色轮廓。

Right now, the color is showing green which is fine. Every time I click the button, the button changes into a darkish shade of green. What I want is to make it so that the button does not change color but just remain the default bootstrap color and also, remove the blue outline around it.

对于蓝色轮廓，我试图将轮廓设置为无，但由于某种原因它没有起作用。我知道我们必须使用

For the blue outline, I attempted setting the outline to none but it didn't work for some reason. I know we have to use

.btn : active:focus {

}

但是我不知道引导成功按钮的默认颜色，所以我很难弄清楚它。

But I don't know the default color of the bootstrap success button so I'm having difficulty in figuring it out.

推荐答案

btn-成功的默认颜色为＃ 5cb85c 。您所要做的就是使用DevTools对其进行检查，或者搜索您的引导程序样式表以查找与该类有关的所有规则，并更改您自己的样式表中所需的内容以覆盖它们。根本不需要使用！important ，特异性就是您的朋友。参见 MDN特异性。

The default color for btn-success is #5cb85c. All you have to do is inspect it with DevTools or search your bootstrap stylesheet to find all the rules that pertain to this class and change whatever you need in your own stylesheet to override them. No need to use !important at all, specificity is your friend. See MDN Specificity.

请参阅工作片段（此示例将所有状态更改为相同的基本颜色，并且还删除了box-shadow属性。您应该可以在此处进行任何更改。）

See working Snippet (This example changed all states to the same base color just as an example and also removes the box-shadow property as well. You should be able to change whatever you need from here.)

.btn.btn-success {
  color: #fff;
  background-color: #5cb85c;
  border-color: #5cb85c;
}
.btn.btn-success.focus,
.btn.btn-success:focus {
  color: #fff;
  background-color: #5cb85c;
  border-color: #5cb85c;
  outline: none;
  box-shadow: none;
}
.btn.btn-success:hover {
  color: #fff;
  background-color: #5cb85c;
  border-color: #5cb85c;
  outline: none;
  box-shadow: none;
}
.btn.btn-success.active,
.btn.btn-success:active {
  color: #fff;
  background-color: #5cb85c;
  border-color: #5cb85c;
  outline: none;
}
.btn.btn-success.active.focus,
.btn.btn-success.active:focus,
.btn.btn-success.active:hover,
.btn.btn-success:active.focus,
.btn.btn-success:active:focus,
.btn.btn-success:active:hover {
  color: #fff;
  background-color: #5cb85c;
  border-color: #5cb85c;
  outline: none;
  box-shadow: none;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<nav class="navbar navbar-default">
  <div class="container-fluid">
    <div class="navbar-header">
      <a class="navbar-brand" href="#">Brand</a>
      <button type="button" class="btn btn-success navbar-btn">Changed BTN</button>
      <button type="button" class="btn btn-info navbar-btn">Default BTN</button>
    </div>
  </div>
</nav>

这篇关于引导按钮活动颜色更改的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！