Стилизация select

Стилизация select на чистом css без использования сторонних библиотек или JavaScript кода

Структура будет стандартной

<select size="1">
  <option>Слон</option>
  <option>Бегемот</option>
  <option>Жираф</option>
</select>

Чтобы в select отображаемая строка была одна используем атрибут size со значением 1.

Стилизация для нашего селекта

-webkit-appearance: none;
-moz-appearance: none;
-ms-appearance: none;
appearance: none;
background: url('path/img.png') no-repeat right center;
outline: 0;

Получаем

В примере выше мы прописали четыре строчки ccs свойства appearance с вендорными префиксами, чтобы свойство работало одинаково во всех браузерах. Что это за свойство читайте ниже.

Вся сложность заключалась лишь в замене стандартной стрелки в прямоугольнике, вместо которой мы реализовали background. Таким образом можно вставить любую картинку. Необходимо лишь подогнать размер при помощи свойства background-size

Appearance CSS

Реализовать нашу задачу помогло css3 свойство appearance

Так что же это за такое магическое свойство без которого нам было не обойтись. Данное свойство позволяет изменить вид элемента на: button, checkbox, radio, field, icon и многое другое. В нашем случае мы вообще скрыли элемент, используя none и добавили картинку с помощью background

Если вам понравилась статья про стлизацию select, рекомендую прочитать про Стилизацию чекбоксов