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.