Question

我正在尝试将按钮的颜色更改为自定义颜色。该按钮正在使用引导程序的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而不是按钮。

Answer 1

使用!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>

当被单击或激活时，Bootstrap Button Primary保持蓝色一秒钟，即使被覆盖

1 个答案: