Search code examples
csshovermicrosoft-edgehtml-selectbackground-color

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

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.

Solution

  • 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/[email protected]/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/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-Piv4xVNRyMGpqkS2by6br4gNJ7DXjqk09RmUpJ8jgGtD7zP9yug3goQfGII0yAns" crossorigin="anonymous"></script>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap-select.min.css">
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/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:

    enter image description here