使用 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?使用 Materialize 等其他框架时，如何在 Bootstrap Navbar Toggler Icon 处于活动状态时更改其背景颜色？
【发布时间】：2020-09-17 04:48:14
【问题描述】：

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

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

我正在尝试将背景颜色设置为透明，但它没有。这是我试过的 CSS。

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

这是密码笔link。

【问题讨论】：

标签： css bootstrap-4 toggle navbar materialize

【解决方案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 放在按钮上，按钮就会一直显示“错误”，所以我把 :focus 放在所有东西上，之后我删除了:focus 中的a 为他使用了一个特定的背景。

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;
}

【讨论】：

my codepen link