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 and Safari, but not in Mozilla and IE.

select.desktopDropDown {     appearance: none;     -moz-appearance:none; /* Firefox */     -webkit-appearance:none; /* Safari and Chrome */ } 

Here is a [jsfiddle][1].

Answer 1

Use this it will work but with IE10+ and for FF :

Your css should look like this:

select.desktopDropDown::-ms-expand {     display: none; } 

More about ::ms-expand.

Then for the rest :

select.desktopDropDown {     outline : none;     overflow : hidden;     text-indent : 0.01px;     text-overflow : '';     background : url("../img/assets/arrow.png") no-repeat right #666;      -webkit-appearance: none;        -moz-appearance: none;         -ms-appearance: none;          -o-appearance: none;             appearance: none; } 

Note: I hardcoded path "../img/assets/arrow.png" as background.

This should work good for you in IE, Firefox and Opera .

Answer 2

Bare-bones examples:

For I.E:

select::-ms-expand {     display: none; }   

For Firefox:

select {     -moz-appearance: none;     appearance: none;      text-overflow: ''; /* this is important! */ }