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

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.

CodePudding user response：

What you are asking is not supported in just about any browser. People often use libraries which build selects from unordered lists, but your best solution is to go back to your designer and ask how necessary the requirement is. Many of the libraries have poor accessibility compliance, and they always add a layer of complexity to maintain.

CodePudding user response：

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 >
  <div >
    <button  type="button" id="defaultDropdown" data-bs-toggle="dropdown" data-bs-auto-close="true" aria-expanded="false">Select</button>
    <ul  aria-labelledby="defaultDropdown">
      <li><a  href="#">Volvo</a></li>
      <li><a  href="#">Saab</a></li>
      <li><a  href="#">VW</a></li>
      <li><a  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>