单击 Bootstrap 时如何更改下拉按钮颜色？

Question

我安装了这个 Bootstrap 下拉按钮https://getbootstrap.com/docs/4.0/components/dropdowns/（第二个带有“a”元素，所以我的“按钮”实际上是一个链接）并且一切正常，除了当我尝试在单击按钮时更改按钮的背景颜色时；它仍然是按钮附带的默认灰色以及出现的浅灰色边框。我想在单击按钮时更改背景颜色。

这是我的代码：

（只是为了解释一下，我的html位于li中，因为我使用下拉按钮作为导航的菜单项，并且我使用span而不是div，因为它只会与span正确对齐而不是形成一个块。）

html:

<span class="dropdown show">

    <li>

        <a class="btn btn-secondary dropdown-toggle" href="#" role="button" 
        id="dropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" 
        aria-expanded="false" onclick="myFunction()">Help</a>

    <span class="dropdown-menu" aria-labelledby="dropdownMenuLink">
        <a class="dropdown-item" href="#">Action</a>
        <a class="dropdown-item" href="#">Another action</a>
        <a class="dropdown-item" href="#">Something else here</a>
    </span>
    </li>
</span>

CSS：

    #color-change {
    background-color: #00ffba;
}

JavaScript：

    function myFunction() {
    document.getElementById("color-change");
} 

我在网上查看并尝试了其他在单击时更改背景颜色的方法，但无济于事，我认为这可能与干扰Javascript的列表元素和/或span元素以及干扰Bootstrap有关，但我的 JavaScript 也可能是错误的。

谢谢！

`

Answer 1

您可以通过简单的 CSS 来实现这一点。在标签中添加一个类。

 <a class="btn btn-secondary dropdown-toggle customButton" href="#" role="button"
       id="dropdownMenuLink" data-toggle="dropdown" aria-haspopup="true"
       aria-expanded="false">Help</a>

CSS

.show > .customButton:focus{
background: #00ffba !important ;
  box-shadow:none !important;
  border: none !important;

}
.customButton{
  box-shadow:none !important;
  border: none !important;
}

如果您希望所有 btn-secondary 在单击时具有相同的颜色，则可以将 css 直接添加到该类，如下所示：

.show > .btn-secondary:focus{
background: #00ffba !important ;
  box-shadow:none !important;
  border: none !important;

}
.btn-secondary{
  box-shadow:none !important;
  border: none !important;
}

Codepen链接： https: //codepen.io/anon/pen/xzWrYr