-webkit-appearance:none style property is not accepted by Firefox browser

Question

I'm working on building new site , i need a drop down menu to select the amount of something in my site . but this drop down menu has a style that i have to make it. the style of this drop down menu is that the drop down box has no arrow - the arrow that appear on the right to click on it and open the drop down items-.

I have made many searches and I hove found this style property :"-webkit-appearance:none ", in the class of the drop down list ,I have put this property and the arrow has been disappeared using the google chrome browser.

but the "problem" is : this property is not working on the Firefox browser , the arrow has not been disappeared .

i will give you a simple view to see how this arrow has not been disappeared in the Firefox browser :

here is the chrome view as the drop down menu without the arrow:

my question is :

is there CSS style property to make a drop down menu without this arrow in the "Firefox" browser ?

Answer 1

-webkit prefixed properties are respected by Safari and Chrome only, for Firefox, you need to use -moz prefix. When you use -webkit, Firefox will just skip the property and will move ahead, thus it spoils your select design.

Though, you can achieve the above with a lil hack, wrap your select tag using a div, assign fix width to your div, and than use greater width for your select tag. Now use background-image for your select, and use overflow: hidden; for the wrapper

Demo

div {
    width: 200px;
    border: 1px solid #f00;
    overflow: hidden;
}

div select {
    width: 220px;
    background-image: url(http://icons.iconarchive.com/icons/deleket/sleek-xp-basic/256/Download-icon.png);
    background-size: 13px 13px;
    background-repeat: no-repeat;
    background-position: 180px 5px;
}

This way, the above will give you better cross browser compatibility, and you don't have to use prefixes as well.