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

Question

我创建了一个带有类别下拉按钮的搜索栏。我能够在悬停、活动、焦点和其他状态下删除按钮的背景颜色。但是，当我在按钮外部单击以关闭下拉菜单时，按钮再次获得其背景颜色。我怎样才能删除它？（我正在使用 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>

Answer 1

您正在使用 bootstrap 并试图反对它。

尽量只使用这些类:

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

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

How can I remove background color of button when clicking outside?

html

css

button

bootstrap-4