单击外部时如何删除按钮的背景颜色？答案

【问题标题】：How can I remove background color of button when clicking outside?单击外部时如何删除按钮的背景颜色？
【发布时间】：2021-08-12 14:22:12
【问题描述】：

我创建了一个搜索栏，其中包含一个类别下拉按钮。我能够在它的悬停、活动、焦点和其他状态下删除按钮的背景颜色。但是，当我在按钮外部单击以关闭下拉菜单时，按钮会再次获得其背景颜色。我怎样才能删除它？（我使用的是 Bootstrap 4）

当我点击它时，它看起来很棒：

当我点击外部时，按钮获得背景颜色：

.nh-searchbar-category-dropdown-btn {
  border: none;
  position: relative;
  left: 55px;
  color: $secondary-color;
}


/* This is how I'm hidding the background color */

.nh-searchbar-category-dropdown-btn:hover,
.nh-searchbar-category-dropdown-btn:active,
.nh-searchbar-category-dropdown-btn:focus,
.nh-searchbar-category-dropdown-btn:focus:focus-within,
.nh-searchbar-category-dropdown-btn:visited,
.nh-searchbar-category-dropdown-btn:target,
.nh-searchbar-category-dropdown-btn:focus:focus-visible {
  background-color: transparent !important;
  color: $primary-color !important;
  transition: none !important;
  border: none !important;
}

<button class="btn btn-outline-secondary dropdown-toggle nh-searchbar-category-dropdown-btn" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
  <i class="far fa-bars"></i>
</button>

【问题讨论】：

标签： html css button bootstrap-4

【解决方案1】：

您正在使用引导程序并试图反对它。

尝试只使用这些类：

<button class="btn btn-link YOUR CLASSES EXCEPT nh-searchbar-category-dropdown-btn" type="button">
  <i class="far fa-bars"></i>
</button>

【讨论】：