css - 全局设置自定义 Bootstrap 4 按钮颜色

Question

我正在尝试设置 Bootstrap 4 按钮的颜色。正是我想改变 btn-primary 的颜色按住鼠标单击它。它必须是一些我必须着色的按钮事件，但它似乎不在 hover 中, focus ，或active .

在我的测试中，我得到了带有类 btn-primary 的按钮完全红色，除了单击它时，按钮会变成蓝色。为了创建 CSS，我使用 Sass。

我的app.scss文件:

.btn-primary {
    &:hover {
        color: red;
        background-color: red;
    }
    &:focus {
        color: red;
        background-color: red;
    }
    &:active {
        color: red;
        background-color: red;
    }
}

如何在单击按钮时设置按钮的颜色？

Answer 1

与 !important 一起使用。

.btn-primary:hover {
  color: red;
  background-color: red !important;
}

.btn-primary:focus {
  color: red;
  background-color: orange !important;
}

.btn-primary:active {
  color: white;
  background-color: green !important;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>

<button type="button" class="btn btn-primary">Primary</button>

或者，不使用 !important:

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>

<style>
.btn-primary:hover {
  color: white;
  background-color: red;
}

.btn-primary:focus {
  color: red;
  background-color: orange;
}

.btn-primary:not(:disabled):not(.disabled):active {
  color: white;
  background-color: green;
}
</style>
<button type="button" class="btn btn-primary">Primary</button>