时间戳

首页 > 解决方案 > Bootstrap Button Primary 在单击或激活时会保持蓝色一秒钟，即使被覆盖也是如此

css - Bootstrap Button Primary 在单击或激活时会保持蓝色一秒钟，即使被覆盖也是如此

问题描述

我正在尝试将按钮的颜色更改为自定义颜色。该按钮正在使用引导程序的 btn-primary 类。我用这种自定义颜色覆盖了我能找到并想到的所有可能状态，但是当我单击按钮时，它仍然会保持蓝色一两秒钟，然后再变回自定义颜色。

这是我用于它的 CSS：

.btn-primary {
    padding: 16px;
    padding-right: 40px;
    padding-left: 40px;
    color: #fff;
    background-color: #A8CC6B;
    border-color: #A8CC6B;
    margin-left: 50px;
}
.btn-primary:focus,
.btn-primary.focus {
        color: #fff;
        background-color: #A8CC6B;
        border-color: #A8CC6B;
    }
.btn-primary:hover {
        color: #fff;
        background-color: #657D41;
        border-color: #657D41;
    }
.btn-primary:active,
.btn-primary.active,
.open > .dropdown-toggle.btn-primary {
        color: #fff;
        background-color: #A8CC6B;
        border-color: #A8CC6B;
    }
.btn-primary:active:hover,
.btn-primary.active:hover,
.open > .dropdown-toggle.btn-primary:hover,
.btn-primary:active:focus,
.btn-primary.active:focus,
.open > .dropdown-toggle.btn-primary:focus,
.btn-primary:active.focus,
.btn-primary.active.focus,
.open > .dropdown-toggle.btn-primary.focus {
        color: #fff;
        background-color: #A8CC6B;
        border-color: #A8CC6B;
    }
.btn-primary:active,
.btn-primary.active,
.open > .dropdown-toggle.btn-primary {
    background-image: none;
    background-color: #A8CC6B;
        border-color: #A8CC6B;
}
    .btn-primary.disabled:hover,
    .btn-primary[disabled]:hover,
    fieldset[disabled] .btn-primary:hover,
    .btn-primary.disabled:focus,
    .btn-primary[disabled]:focus,
    fieldset[disabled] .btn-primary:focus,
    .btn-primary.disabled.focus,
    .btn-primary[disabled].focus,
    fieldset[disabled] .btn-primary.focus {
        background-color: #A8CC6B;
        border-color: #A8CC6B;
    }

我不得不承认我不知道其中一半是做什么的，而且我认为这很丑陋，我会更乐意不将所有这些都提交给 sc。感谢是否有人对此有更好的解决方法。根据业务需求，使用自定义 div 代替按钮不是一个选项。

标签： csstwitter-bootstrapbuttoncolorsclick

解决方案

用于!important防止覆盖（小提琴：https ://jsfiddle.net/7tydLgj3/2/ ）

.btn-primary {
    padding: 16px;
    padding-right: 40px;
    padding-left: 40px;
    color: #fff!important;
    background-color: #A8CC6B!important;
    border-color: #A8CC6B!important;
    margin-left: 50px;
}
.btn-primary:focus,
.btn-primary.focus {
        color: #fff!important;
        background-color: #A8CC6B!important;
        border-color: #A8CC6B!important;
    }
.btn-primary:hover {
        color: #fff!important;
        background-color: #657D41!important;
        border-color: #657D41!important;
    }
.btn-primary:active,
.btn-primary.active,
.open > .dropdown-toggle.btn-primary {
        color: #fff!important;
        background-color: #A8CC6B!important;
        border-color: #A8CC6B!important;
    }
.btn-primary:active:hover,
.btn-primary.active:hover,
.open > .dropdown-toggle.btn-primary:hover,
.btn-primary:active:focus,
.btn-primary.active:focus,
.open > .dropdown-toggle.btn-primary:focus,
.btn-primary:active.focus,
.btn-primary.active.focus,
.open > .dropdown-toggle.btn-primary.focus {
        color: #fff!important;
        background-color: #A8CC6B!important;
        border-color: #A8CC6B!important;
    }
.btn-primary:active,
.btn-primary.active,
.open > .dropdown-toggle.btn-primary {
    background-image: none;
    background-color: #A8CC6B!important;
        border-color: #A8CC6B!important;
}
    .btn-primary.disabled:hover,
    .btn-primary[disabled]:hover,
    fieldset[disabled] .btn-primary:hover,
    .btn-primary.disabled:focus,
    .btn-primary[disabled]:focus,
    fieldset[disabled] .btn-primary:focus,
    .btn-primary.disabled.focus,
    .btn-primary[disabled].focus,
    fieldset[disabled] .btn-primary.focus {
        background-color: #A8CC6B!important;
        border-color: #A8CC6B!important;
    }
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
  <button type="button" class="btn btn-primary">Primary</button>

推荐阅读