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

Question

I have been trying to change the background color of the option elements of a select dropdown on a mouse hoverover and I can't get it to work in Microsoft Edge, the hoverover always displays as gray. It works perfectly fine in Chrome and Firefox, and :hover works on other elements in Edge, but I can't get option:hover to change the background color.

Additionally, if the select is set to multiple, the hoverover works, but not if it's in dropdown mode.

Is there some trick to getting Edge to change the color or is it a limitation of the brower?

One other issue. I am also trying to change the color of the selected option, and although option:checked works, when the dropdown first opens it shows as gray and the style doesn't take effect until I move the mouse over the option list.

Hi, may I know if you have got any chance to check my answer? Is [my answer](https://stackoverflow.com/questions/68626310/can-you-change-the-background-color-of-a-select-option-on-hover-in-microsoft-ed/68633314#68633314) below helpful to deal with the issue? — Yu Zhou, Aug 05 '21 at 06:43
Thanks. It was decided to just leave it in Edge. A styling issue in one browser wasn't worth going through all that trouble to fix. — Hypersapien, Aug 05 '21 at 13:45

score 1 · Accepted Answer · answered Aug 03 '21 at 09:12

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>

If you don't want to change the <select> to multiple when selecting, you can only write your own <select> using something like <ul> <li> then style them, or using some plugins like bootstrap-select. For the other issue you mentioned, it can also be fixed by creating your own <ul> <li> select or using plugins.

You can refer to my bootstrap-select sample:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-Piv4xVNRyMGpqkS2by6br4gNJ7DXjqk09RmUpJ8jgGtD7zP9yug3goQfGII0yAns" crossorigin="anonymous"></script>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-select@1.13.14/dist/css/bootstrap-select.min.css">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap-select@1.13.14/dist/js/bootstrap-select.min.js"></script>
    <style>
        /*hover color*/
        .dropdown-menu > li > a:hover,
        .dropdown-menu > li > a:focus {
            text-decoration: none;
            color: #ffffff;
            background-color: #f3969a;
        }

        /*checked color*/
        .dropdown-item.active {
            background-color: #33e2ea;
        }
    </style>
</head>
<body>
    <select id="txtTitle" class="form-control selectpicker">
        <option selected value="default">Please Select</option>
        <option value="Session">Session</option>
        <option value="Class">Class</option>
    </select>
</body>
</html>

The result in Edge/Chrome:

So, either fake something that looks like a dropdown, or switch it to multiple while it's being pressed, which would take some finagling to make it not throw off the flow of the page and wouldn't show the selected item at the top without some behind the scenes manipulation. I'm just going to accept that it's not possible in Edge. I seem to remember it not being possible in IE either. — Hypersapien, Aug 05 '21 at 13:42

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

1 Answers1