Html dropdown background color option in Chrome Chrome

Question

I have a web application in MVC4 that has a drop down menu with 302 entries. In the drop-down list of items, I set a color such as gray. But this gray color will spread as a whole. Dropdown, including option tag.

Here is my css class

select { width: 100px; background-color: #717171; color: #fff; } .toolbar select > option { background-color: #fff !important; color: #000; } .toolbarDropdownSelected { background-color: #8B5052 !important; } 

Up to 300 entries, everything looks good in the Chrome browser, but if the entries exceed 300, then the Gray color extends to Dropdown as a whole, including options in the case of the Chrome browser.

In Firefox, everything looks good if entries exceed 300.

I have added a screenshot. Please look.

The expected result should look like this: Firefox result

Please check this link in Chrome browser. I have version 44.0.2403.107 m of the Chrome browser https://jsfiddle.net/gk30zj0k/

Please, help.

Answer 1

The developers of Google Chrome believed that in the drop-down list, select that no one would put more than 300 elements, so to improve performance they turned off the css-style if you exceeded it. After much noise, they eliminate this limitation in v45. https://code.google.com/p/chromium/issues/detail?id=513339

Answer 2

It worked for me on chrome too. Try this one

 select, select:hover { background-color: #717171; color: #fff; } option { color: #000; background-color: white; }