如何在Bootstrap 4中更改按钮的活动颜色

Question

我有以下输出：

按钮未点击

鼠标悬停在按钮上

按钮被点击 (这是我的问题)

我该如何改变这个活动按钮的颜色？

我有以下代码：

/**BTN Primary**/
.btn{
    border-radius:1px;
}

.btn-primary{
    background-color: rgb(114, 96, 153);
    border-color:rgb(114, 96, 153);
}

.btn-primary:hover{
    background-color: rgb(94, 79, 126);
    border-color:rgb(94, 79, 126);
}

.btn-primary:focus{
    background-color: rgb(94, 79, 126);
    border-color:rgb(94, 79, 126);
}

.btn-primary:active{
    background-color: rgb(94, 79, 126);
    border-color:rgb(94, 79, 126);
    box-shadow: 0 1px 1px rgba(255, 255, 255, 0.075) inset, 0 0 8px rgba(114, 96, 153, 0.6);
    outline: 0 none;
}
/**BTN Primary**/

- user8718268

Answer 1

您需要覆盖 .btn-primary:not(:disabled):not(.disabled):active{

检查元素并在开发工具中点击 切换伪类，然后勾选 active 以查看按钮处于活动状态时应用了哪些规则，您将看到您的规则是否被覆盖或您需要覆盖什么。

无法在代码段中使其正常工作，这里是一个演示：https://jsfiddle.net/takius/h9sj80kx/14/

编辑：（基于评论）

要更改蓝色阴影，请转到：.btn-primary:not(:disabled):not(.disabled):focus{

更新的演示：https://jsfiddle.net/takius/h9sj80kx/32/

- Taki

---

你明白了。谢谢先生！ - user8718268

最后一个问题先生。box-shadow不会改变。如何更改它？ - user8718268

.btn-primary:not(:disabled):not(.disabled):active{ background-color: rgb(94, 79, 126); border-color:rgb(94, 79, 126); box-shadow: 0 1px 1px rgba(255, 255, 255, 0.075) inset, 0 0 8px rgba(114, 96, 153, 0.6); outline: 0 none; } - user8718268

不用谢，我已经更新了关于阴影的答案 :) - Taki

Answer 2

如果您正在使用webpack或类似的编译器从Bootstrap源代码中获取css，则可以在您的my.scss文件中这样做。

$blue:    rgb(114, 96, 153);
@import "~bootstrap/scss/_variables";
@import '~bootstrap/scss/bootstrap';

- Yevgeniy Afanasyev