I recently designed a search bar with a category dropdown button, and managed to successfully customize its hover, active, and focus states to remove the background color. However, I encountered an issue where clicking outside the button to close the dropdown reverts the button back to its original background color. Can anyone provide guidance on how to prevent this from happening? (Note: I am using Bootstrap 4)
Here's how the button looks when clicked on:
And here's how the button behaves when clicked outside:
.nh-searchbar-category-dropdown-btn {
border: none;
position: relative;
left: 55px;
color: $secondary-color;
}
/* CSS to hide the background color on hover, active, and focus states */
.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>