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


i'm trying create custom drop down control , need hide arrows native controls. i'm using following css, working chrome , safari, not in mozilla , ie.

select.desktopdropdown {     appearance: none;     -moz-appearance:none; /* firefox */     -webkit-appearance:none; /* safari , chrome */ } 

here [jsfiddle][1].

use work ie10+ , ff :

your css should this:

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

more ::ms-expand.

then 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: hardcoded path "../img/assets/arrow.png" background.

this should work in ie, firefox , opera .


Comments

Popular posts from this blog

java - activate/deactivate sonar maven plugin by profile? -

python - TypeError: can only concatenate tuple (not "float") to tuple -

java - What is the difference between String. and String.this. ? -