CSS trick: Setting background color of a selected HTML option element

Update 02.02.2018: As noted by Tom this now only works when the attribute multiple is set.

Have you ever wanted to set the background color of a selected OPTION element of a drop down ? Unfortunately, setting the CSS background-color property does not work for (most/all?) browsers, but there is a workaround using the background-image property instead:

option:checked, option:hover {
    color: white;
    background: #488f8f repeat url("data:image/gif;base64,R0lGO...");
}

If you are interested in highlighting when hovering with the mouse only, then setting the background-color property is enough, e.g:

option:hover {
  background-color: #488f8f; 
} 

You can convert your image to a data url online on Data Url Maker.

Join the Conversation

13 Comments

Your email address will not be published. Required fields are marked *

  1. Hi.

    I am looking to do the exact opposite, to highlight the selection you are hovering over, please help?

    1. works in Edge, Firefox and Chrome:
      option:hover {
      background-color: #488f8f;
      }

      Sorry, demo wasn’t working anymore.

  2. I confirm, this neat trick works with most browsers (current versions); I’ve tried
    * FireFox (43.0.1),
    * InternetExplorer (11, et émulation 10, 9, 8, 7 et même 5!)
    * GoogleChrome (47.0.2526.106 m (64-bit))
    * Safari (for PC, v5.1.7)
    * Opera (34.0)
    * Opera (12.16 the previous rendering engine)
    And they all work nicely (with minor variants…)

    I used a variant: I put in each one of my tags a style attribute with:
    <option value=’XYZ’ style=’color: white; background: a_color_in_#hex repeat url(absolute_path_to_a_fully_transparent_png_image)’>Text</option>

    Worked wonders form me…