CSS drop down menu list color does not change on hover in Google chrome

Question

I have problem with CSS drop down menu which does not work in chrome on hover.

Expected Behavior: Hovering on any of list item should change the background color to what is set using CSS rules.

Actual behavior: Default color(blue) stays even after hovering on list item.

If i run the same code in Internet Explorer(IE 10,11) it is working absolutely fine but not in chrome.My chrome version is 47.

MyCode:

 <style> option:hover {
   background: #01A982;
 }
 </style>

<select>
  <option>1</option>
  <option>2</option>
  <option>3</option>
  <option>4</option>
  <option>5</option>
</select>

JsFiddle Link : https://jsfiddle.net/sandeepb/p7jz9g95/

Welcome to Stack Overflow! Questions seeking code help must include the shortest code necessary to reproduce it **in the question itself**. See [**How to create a Minimal, Complete, and Verifiable example**](http://stackoverflow.com/help/mcve) — Paulie_D, Jan 21 '16 at 09:49

score 1 · Answer 1 · answered Jan 22 '16 at 06:35

Chrome doesn't support :hover on option elements. There isn't really a simple workaround for this. You would need to use a javascript solution or some other type of elements that are made to look & act like a select, if you really need :hover support in Chrome.

score 0 · Answer 2 · edited May 23 '17 at 10:27

0

Since select and option tags make some trouble with styling them, maybe changing your select/options elements to a list element will help you:

Convert select dropdown into unordered list with jquery

edited May 23 '17 at 10:27

Community

1
1

answered Jan 22 '16 at 07:25

Charly H

147
9

CSS drop down menu list color does not change on hover in Google chrome

2 Answers2