使用 Materialize 等其他框架时，如何更改处于活动状态的 Bootstrap Navbar Toggler Icon 的背景颜色？

Question

我正在从事一个需要 Bootstrap 和 Materialise 框架的项目。我有这个导航栏切换，当不处于活动状态时这是正常的。

但是当它进入活动状态并使用 Materialize 的默认颜色填充背景时 CSS。

我试图将背景颜色设置为透明，但没有成功。这是我试过的CSS。

.navbar-toggler-icon{
  background-color: transparent !important;
}
.navbar-toggler-icon :active{
  background-color: transparent !important;
}

这是代码笔link。

Answer 1

我在 div 中添加了一个 id，其中包含 navbar 的所有内容。

<body>
  <div class="navbar navbar-dark navbar-expand-lg sticky-top w-100" >
            <div id="color" class="container p-2">
                <a class="navbar-brand font-weight-bold text-white mx-5 d-none d-sm-block" href="#">ReEvent</a>
                <button  class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
                <span  class="navbar-toggler-icon"></span>
                  </div>
  </div>
    </body>

当我更改 id 中的颜色时，如果 id 在 div 上，div 中的所有内容都将一起更改。所以我只是为了 button 接收更改。

但是，我不知道为什么，如果你把 :focus 放在按钮上，按钮会和 "bug" 保持一致，所以我把 :focus 放在所有东西上在此之后，我使用一个特定的 bg 为他删除了 a 的 :focus。

body{
  background-color: #222;
}
.navbar-toggler-icon{
  background-color: transparent !important;
}
#color button :hover, #color :focus, #color button :active{
  background-color: transparent !important;
}

#color a :focus {
  background-color: white !important;
}

使用 Materialize 等其他框架时，如何更改处于活动状态的 Bootstrap Navbar Toggler Icon 的背景颜色？

How to change background color of Bootstrap Navbar Toggler Icon when it's active when using other frameworks like Materialize?

css

toggle

navbar

materialize

bootstrap-4