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

Question

Is there a way to change the background of an option element when I hover over it without JS?

I mean a simple select with options.

option:hover {
  background-color: yellow;
}

<select id="cars">
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="vw">VW</option>
  <option value="audi" selected>Audi</option>
</select>

I tried all available options. But without Javascript, I couldn't find a solution.

Answer 1

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/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/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>

The only known way to do it with select (limitations)

Browser compatibility:

Chrome: ✓

Firefox: ✓

Safari: ☓

This alternative would be to alter the default view for option's and you can use the onfocus event attribute to alter them. For example, you can use <select onfocus="this.size=4;" onblur="this.size=0;" onchange="this.size=1; .this.blur();">

This focus event essentially changes the default styling for the options. With an onfocus you could specify .this.size=4;" to give room for four options & onchange="this.size=1;" to have it resort back to the default after an options is selected. this:blur(); allows it to keep the same onfocus effect after selecting options and opening the select again.

See that version here:

option[value="volvo"]:hover {
  background-color: pink;
}

option[value="saab"]:hover {
  background-color: blue;
}

option[value="vw"]:hover {
  background-color: green;
}

option[value="audi"]:hover {
  background-color: yellow;
}

/* removes default scroll when using this.size */
select {
  overflow: hidden;
}

<select onfocus="this.size=4;" onchange="this.size=1; this.blur();">
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="vw">Opel</option>
  <option value="audi">Audi</option>
</select>