Question

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

但是我正在使用bootstrap而且我正在尝试将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

由于btn与名为btn-primary的同一元素共享其类，因此您的CSS选择器应该看起来像

＆＃13;

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

＆＃13;

Answer 2

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

bootstrap.css（BS4）中的

btn-primary类定义如下：（请注意，没有必要在.btn.btn-primary前面添加这些类，只需要.btn-primary ...以前的答案实际上并不正确，但是因为特殊性而有效。： - ）

＆＃13;

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

＆＃13;

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

改变引导按钮

2 个答案: