Опитвам се да стилизирам падащата стрелка на елемент <select> само с CSS, работи перфектно в Chrome/Safari:
select {
-webkit-appearance: button;
-webkit-border-radius: 2px;
-webkit-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1);
-webkit-padding-end: 20px;
-webkit-padding-start: 2px;
-webkit-user-select: none;
background-image: url('./select-arrow1.png') ;
background-position: center right;
background-repeat: no-repeat;
border: 1px solid #AAA;
margin: 0;
padding-top: 2px;
padding-bottom: 2px;
width: 200px;
}
Което се изобразява прекрасно както се вижда тук
По тази логика, единственото нещо, което трябваше да направя, за да работи във Firefox, беше да добавя всички -webkit-* неща като -moz-*:
-moz-appearance: button;
-moz-border-radius: 2px;
-moz-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1);
-moz-padding-end: 20px;
-moz-padding-start: 2px;
-moz-user-select: none;
Работи на 99%, единственият проблем е, че падащата стрелка по подразбиране не изчезва и остава върху фоновото изображение както се вижда тук
Изглежда, че -moz-appearance: button; не работи за елемент <select>. Също така -moz-appearance: none; няма ефект за премахване на стрелката за падащо меню по подразбиране.
И така, каква е правилната стойност за -moz-appearance за премахване на падащата стрелка по подразбиране?
Актуализации:
11 декември 2014 г.: Спрете да измисляте нови хакове. След 4 години и половина -moz-appearance:none започва да работи след Firefox 35. Въпреки че moz-appearance:button все още е повреден, не е необходимо да го използвате така или иначе. Ето един много елементарен работещ пример.
28 април 2014 г.: Споменатата css hack работи няколко месеца, но от началото на април 2014 г. тази грешка се промъква обратно във Firefox 31.0.a1 Nightly на всички платформи.
