Я пытаюсь создать стрелку раскрывающегося списка элемента <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 работал пару месяцев, но с начала апреля 2014 года эта ошибка снова появилась в Firefox 31.0.a1 Nightly на всех платформах.
