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
Post a Comment