How can you modify the background color of a selected or hovered Bootstrap 4.6 select option?

Question

How can you modify the background color of a selected or hovered Bootstrap 4.6 select option?

When using Bootstrap 4.6, all my form select dropdowns seem to be displaying with a blue background like in this image:

https://i.sstatic.net/Vqsxw.png

In my .scss file, I have set it up as follows:

// Custom Variables

@import '../../vendor/bootstrap-4.6.0/scss/functions';
@import '../../vendor/bootstrap-4.6.0/scss/variables';

// Bootstrap Overrides
$primary: #6b37c4;
$link-color: $primary;
$link-hover-color: darken($primary, 10%);
$WHAT-GOES-HERE-BG?: $primary; // <-- what goes here?

The issue at hand:

I am wondering if there is a specific Bootstrap 4.6 variable that can be modified to change the blue background color to something else universally.

If yes, which variable name(s) should be changed? I attempted changing variables like custom-select-bg, custom-select-background, form-select-bg, but none yielded the desired results.

If not, is there an alternative method to alter this blue background for Bootstrap 4.6? I lack knowledge about browser compatibility, however, I prefer a long-lasting solution. Various suggestions on html - Change select list option background color on hover were outdated or ineffective.

An example to illustrate:

I expected the select option's background color to switch to yellow upon hovering, but it remained unchanged. Furthermore, I am unsure how to prevent the menu from closing so I could examine the CSS! It's becoming a bit frustrating.

#mySelectDiv {
  max-width: 300px;
  padding: 1rem;
}

option:hover {
  background-color: yellow;
}

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="43212c2c37303731223303776d756d71">[email protected]</a>/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">

<div class="my-3" id="mySelectDiv">
  <select class="custom-select" id="myCustomSelect">
    <option selected>Open this select menu</option>
    <option value="1">One</option>
    <option value="2">Two</option>
    <option value="3">Three</option>
  </select>
</div>

<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="7c160d09190e053c4f5249524d">[email protected]</a>/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="f0809f80809582de9a83b0c1dec1c6dec1">[email protected]</a>/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="ff9d90908b8c8b8d9e8fbfcbd1c9d1cd">[email protected]</a>/dist/js/bootstrap.min.js" integrity="sha384-+sLIOodYLS7CIrQpBjl+C7nPvqq+FbNUBDunl/OZv93DB7Ln/533i8e/mZXLi/P+" crossorigin="anonymous"></script>

html css bootstrap-4 bootstrap-select

Answer 1

Answer №1

My suggestion is to avoid custom styling for better results.

If you choose not to follow the first recommendation, my second suggestion would be to utilize a reliable select plugin that already incorporates accessibility features and offers styling options for DOM elements. These plugins do not use <select> under the hood but rather generic DOM elements that can be styled easily.

Creating your own solution is not particularly difficult, but it's not the most ideal approach due to the complexity of dropdowns or selects as UI components. For instance, when dealing with the .dropdown-menu, it often needs to handle overflow within containers with overflow: hidden to prevent unexpected scrollbars from appearing. This can pose some challenges.

If you're interested, here's a customized solution:

$('.dropdown-menu a').click(e => {
  $('.dropdown-item', e.target.closest('.dropdown')).removeClass('active');
  mySelect.value = e.target.innerText
  $(e.target).addClass('active')
  mySelect.focus()
})

#mySelect {
  background-color: #fff !important;
  margin-right: -1.5rem;
  padding-right: 1.5rem;
}
#mySelect:focus {
  border-color: #6b37c4;
  box-shadow: 0 0 0 0.2rem rgb(107 35 196 / 25%);
}

.dropdown-toggle {
  display: flex;
  align-items: center;
}
.dropdown .dropdown-menu {
  box-shadow: 0 1px 5px 0 rgb(0 0 0 / 7%), 0 2px 2px 0 rgb(0 0 0 /5%), 0 3px 1px -2px rgb(0 0 0 / 4%);
  border: 1px solid rgb(0 0 0 / 7%);
}
.dropdown-menu .dropdown-item:hover,
.dropdown-menu .dropdown-item:active,
.dropdown-menu .dropdown-item:focus {
  background-color: rgb(107 35 196 / 10%);
  color: black;
}
.dropdown-menu .dropdown-item.active {
  background-color: #6b37c4;
  color: white;
}

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="fe9c91918a8d8a8c9f8ebecad0c8d0cc">[email protected]</a>/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">

<div style="max-width: 200px">
  <div class="m-3 position-relative dropdown">
    <div class="dropdown-toggle" data-toggle="dropdown">
      <input readonly value="" class="form-control" placeholder="Open this select menu" id="mySelect" />
    </div>
    <div class="dropdown-menu w-100">
      <a class="dropdown-item" href="#">1</a>
      <a class="dropdown-item" href="#">2</a>
      <a class="dropdown-item" href="#">3</a>
    </div>
  </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="fd978c88988f84bdced3c8d3cc">[email protected]</a>/dist/jquery.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="b9c9d6c9c9dccb97d3caf98897888f9788">[email protected]</a>/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="f5979a9a818681879485b5c1dbc3dbc7">[email protected]</a>/dist/js/bootstrap.min.js"></script>

This is intended as a demonstration. Feel free to test it across various browsers and operating systems or enhance it further, but note that I may not provide updates for specific edge cases.

If you decide to create your own solution, here are some things to consider:

Implement keyboard navigation for opening/closing.
Include appropriate role and aria attributes for accessibility.
Ensure proper rendering on all mobile devices (iOS, Android) by testing on real devices or services like BrowserStack, as emulators may not reflect actual behavior accurately.

Answer 2

My suggestion is to avoid custom styling for better results.

If you choose not to follow the first recommendation, my second suggestion would be to utilize a reliable select plugin that already incorporates accessibility features and offers styling options for DOM elements. These plugins do not use <select> under the hood but rather generic DOM elements that can be styled easily.

Creating your own solution is not particularly difficult, but it's not the most ideal approach due to the complexity of dropdowns or selects as UI components. For instance, when dealing with the .dropdown-menu, it often needs to handle overflow within containers with overflow: hidden to prevent unexpected scrollbars from appearing. This can pose some challenges.

If you're interested, here's a customized solution:

$('.dropdown-menu a').click(e => {
  $('.dropdown-item', e.target.closest('.dropdown')).removeClass('active');
  mySelect.value = e.target.innerText
  $(e.target).addClass('active')
  mySelect.focus()
})

#mySelect {
  background-color: #fff !important;
  margin-right: -1.5rem;
  padding-right: 1.5rem;
}
#mySelect:focus {
  border-color: #6b37c4;
  box-shadow: 0 0 0 0.2rem rgb(107 35 196 / 25%);
}

.dropdown-toggle {
  display: flex;
  align-items: center;
}
.dropdown .dropdown-menu {
  box-shadow: 0 1px 5px 0 rgb(0 0 0 / 7%), 0 2px 2px 0 rgb(0 0 0 /5%), 0 3px 1px -2px rgb(0 0 0 / 4%);
  border: 1px solid rgb(0 0 0 / 7%);
}
.dropdown-menu .dropdown-item:hover,
.dropdown-menu .dropdown-item:active,
.dropdown-menu .dropdown-item:focus {
  background-color: rgb(107 35 196 / 10%);
  color: black;
}
.dropdown-menu .dropdown-item.active {
  background-color: #6b37c4;
  color: white;
}

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="fe9c91918a8d8a8c9f8ebecad0c8d0cc">[email protected]</a>/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">

<div style="max-width: 200px">
  <div class="m-3 position-relative dropdown">
    <div class="dropdown-toggle" data-toggle="dropdown">
      <input readonly value="" class="form-control" placeholder="Open this select menu" id="mySelect" />
    </div>
    <div class="dropdown-menu w-100">
      <a class="dropdown-item" href="#">1</a>
      <a class="dropdown-item" href="#">2</a>
      <a class="dropdown-item" href="#">3</a>
    </div>
  </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="fd978c88988f84bdced3c8d3cc">[email protected]</a>/dist/jquery.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="b9c9d6c9c9dccb97d3caf98897888f9788">[email protected]</a>/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="f5979a9a818681879485b5c1dbc3dbc7">[email protected]</a>/dist/js/bootstrap.min.js"></script>

This is intended as a demonstration. Feel free to test it across various browsers and operating systems or enhance it further, but note that I may not provide updates for specific edge cases.

If you decide to create your own solution, here are some things to consider:

Implement keyboard navigation for opening/closing.
Include appropriate role and aria attributes for accessibility.
Ensure proper rendering on all mobile devices (iOS, Android) by testing on real devices or services like BrowserStack, as emulators may not reflect actual behavior accurately.

How can you modify the background color of a selected or hovered Bootstrap 4.6 select option?

Answer №1

Similar questions

Having trouble getting the HTML input textbox onChange event to fire properly?

Issues with CSS and Node Express

Nav Bar Toggle Button - Refuses to display the dropdown menus

How can you animate the background of a website using AngularJS - CSS or JavaScript?

How to eliminate arrow icons from Bootstrap Carousel

Retrieve the file path of an uploaded image in a Razor view using jQuery Ajax

The reasons behind the unsightly gaps in my table

Guide to setting up the primary navigation in the WordPress administration panel

Sending documents to a printer directly from a Rails application

Struggling to retrieve a class within an <a> element in jsTree when hovering?

Title size in css

Combining selected boxes through merging

When clicked, check if the CSS value is equal to

Xpath is effective in Chrome Dev Tools, but does not seem to be functioning properly in RS

The Angular JS routes are not properly loading the required file from the provided TemplateURL when receiving a response from Node

How can I automatically disable certain checkboxes when a specific radio button is selected?

struggling to perfect the CSS styling

WordPress woes: struggles with displaying Font Awesome icons

What causes text inside a fieldset to sometimes appear bigger when viewed on mobile devices?

OpenStreetMap is failing to display the full map within the designated div