Я пытаюсь стилизовать стрелку раскрывающегося списка элемента
только с помощью 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;
не работает для элемента
. Также -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 на всех платформах.