Удаление стрелки выпадающего списка в HTML

Часто в процессе разработки сайтов возникает необходимость кастомизации элементов формы, в частности, выпадающего списка <select>. В некоторых случаях, стандартная стрелка, указывающая на выпадающий список, может мешать общему дизайну страницы. Вот пример такого элемента:

<select>
  <option>Опция 1</option>
  <option>Опция 2</option>
  <option>Опция 3</option>
</select>

Способ удаления этой стрелки отличается в разных браузерах. Рассмотрим несколько вариантов.

Удаление стрелки в браузерах на основе Webkit (Chrome, Safari)

В браузерах на основе Webkit (Chrome, Safari) для удаления стрелки используется свойство -webkit-appearance: none;.

select {
  -webkit-appearance: none;
  appearance: none;
}

Удаление стрелки в Firefox

Для браузера Firefox удаление стрелки выполняется с помощью свойства -moz-appearance: none;.

select {
  -moz-appearance: none;
  appearance: none;
}

Удаление стрелки в Internet Explorer

В Internet Explorer и Edge удалить стрелку можно с помощью свойства ::-ms-expand.

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

Отметим, что эти методы убирают только визуальное отображение стрелки, но не влияют на функционал выпадающего списка. Он продолжает работать так же, как и до применения стилей.

В заключение стоит отметить, что все вышеперечисленные методы можно объединить в одном стилевом блоке для обеспечения кроссбраузерности:

select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

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