更改引导按钮的颜色

Question

这是一个愚蠢的问题，因为我觉得我应该知道答案，并认为我的代码会完成这项工作。

但我正在使用引导程序，并且正在尝试将 btn btn-primary 类从默认的蓝色更改为其他内容。

这是我的html：

<input type="text" class="form-control" placeholder="Search by user name, member type, genre...">
                         <span class="input-group-btn">
                             <button class="btn btn-primary" type="button"><i class="fa fa-search" aria-hidden="true"></i></button>
                         </span>

还有我的 CSS：

.btn btn-primary:hover,
.btn btn-primary:focus,
.btn btn-primary:active,
.btn btn-primary.active {
  color: #ffffff;
  background-color: pink;
  border-color: pink;
}

但它仍然看起来像这样：

Answer 1

确保您的覆盖是在默认引导之后加载，或者如果您使用 npm 并编译自己的，请确保您的变量覆盖放在引导默认值之后

在 bootstrap.css (BS4) btn-primary 类中定义如下： （请注意，没有必要在这些类前面加上 .btn.btn-primary，只需 .btn-primary...前面的答案实际上并不正确，但由于特殊性，它可以工作。： -)

.btn-primary {
  color: #fff;
  background-color: #007bff;
  border-color: #007bff;
}

.btn-primary:hover {
  color: #fff;
  background-color: #0069d9;
  border-color: #0062cc;
}

.btn-primary:focus, .btn-primary.focus {
  box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.5);
}

.btn-primary.disabled, .btn-primary:disabled {
  background-color: #007bff;
  border-color: #007bff;
}

.btn-primary:active, .btn-primary.active,
.show > .btn-primary.dropdown-toggle {
  background-color: #0069d9;
  background-image: none;
  border-color: #0062cc;
}

如果您在主题中填写所有这些内容，请确保您的主题更改在引导后加载。

Answer 2

由于 btn 与名为 btn-primary 的相同元素共享其类，因此您的 CSS 选择器应如下所示

.btn.btn-primary:hover,
.btn.btn-primary:focus,
.btn.btn-primary:active,
.btn.btn-primary.active {
  color: #ffffff;
  background-color: pink;
  border-color: pink;
}