IE & Firefox - custom drop down could not remove native arrows

Question

I\'m trying create a custom drop down control and I need to hide the arrows from the native controls. I\'m using the following CSS, which is working for Chrome

Answer 1

In fact this trick is mainly required for IE10+ where the arrows are in the Metro style of Windows 8, even on Windows 7. Though Windows 8 users must be used to the style cause it's used through the OS. Anyway, I'd recommend instead of using:

display: none;

To use:

visibility: hidden;

Because, at least in IE, the former causes the blue line of the selected item to overlay the dropdown arrow when the select is focused, while the latter does not.