Change Select List Option Background Colour on Hover

Can you change the background color of a select option on :hover in Microsoft Edge?

The <option> elements are rendered by your OS and only a few style attributes that can be applied to it. For the detailed information, you can refer to this thread.

As you say if the select is set to multiple, the hoverover works, we can use the way that changing the <select> to multiple when we select as a workaround. You can refer to the following sample:

option:hover {
  background-color: yellow;
}

<select name="cars" id="cars" onfocus='this.size=4;' onblur='this.size=0;' onchange='this.size=1; this.blur();'>
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="opel">Opel</option>
  <option value="audi">Audi</option>
</select>

Trying to change the option background color on hover in drop down select in CSS

.selector {

  background-color: #252525;
  color: #fff;
  border: none;
  border: 1px solid #595E57;
  padding: 5px;
  width: 150px;
  overflow:hidden;
}
.selector option{
padding:5px;
}
.selector option:hover{
  background-color: #1BA1E2 !important;
}

<select onfocus='this.size=10;' onchange='this.size=1; this.blur();' name=""  class="selector">
             <option value="">Select1</option>
             <option value="">Select2</option>
             <option value="">Select3</option>
             <option value="">Select4</option>
</select>

How to change background color of an option tag when hovering?

The answer is no. Currently, in CSS3 there is no support for this. Perhaps in the next version, there will be.

However, there are alternatives...

The first alternative is making a custom dropdown menu with Bootstrap 5.

That alternative would look like this:

.wrapper {
  height: 100vh;
  width: 100vw;
  display: flex;
  align-items: center;
  justify-content: center;
}

.dropdown-menu li:nth-child(1) > a:hover {
  background-color: pink;
}
.dropdown-menu li:nth-child(2) > a:hover {
  background-color: blue;
}
.dropdown-menu li:nth-child(3) > a:hover {
  background-color: yellow;
}
.dropdown-menu li:nth-child(4) > a:hover {
  background-color: green;
}

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"></script>

<div class="wrapper">
  <div class="btn-group">
    <button class="btn btn-primary dropdown-toggle" type="button" id="defaultDropdown" data-bs-toggle="dropdown" data-bs-auto-close="true" aria-expanded="false">Select</button>
    <ul class="dropdown-menu" aria-labelledby="defaultDropdown">
      <li><a class="dropdown-item" href="#">Volvo</a></li>
      <li><a class="dropdown-item" href="#">Saab</a></li>
      <li><a class="dropdown-item" href="#">VW</a></li>
      <li><a class="dropdown-item" href="#">Audi</a></li>
    </ul>
  </div>
</div>

Change Select List Option Background Colour on Hover

Can you change the background color of a select option on :hover in Microsoft Edge?

Trying to change the option background color on hover in drop down select in CSS

How to change background color of an option tag when hovering?

Related Topics

Leave a reply