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

css, custom-controls, internet-explorer, mozilla

Solution

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 .

Problem

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].

Original source