CSS select без JavaScript и дополнительных элементов

Опубликовано: Четверг, Апрель 3, 2014 Комментарии (3)

Select с кастомными стилями без использования JavaScript в вёрстке я использую давно, но был один недостаток: обёртывающий элемент был необходим. Это не всегда удобно при интеграции. Ну и в целом, чем меньше вспомогательных элементов вёрстке, тем лучше.

Принцип пользовательского оформления select с помощью css

Сам принцип не сложный: вы указываете для селекта нужный фон с изображением, padding-right не меньше, чем управляющий элемент (чтобы текст option не заезжал на него).

Но в чем же была всегда загвоздка? В том, что браузеры кто во что горазд, указывают свои стили и поменять стрелочку в select крайне сложно. Тут придется прибегнуть к всяческим префиксам и хакам.

1. Итак, нам понадобится изображение для управляющего элемента select:

select-toogler

2. Хаки и свойства, чтобы убрать стандартное оформление стрелки select

– с помощью css3 свойства (на практике действует пока только в Chrome, Safari и Opera, которая перешла на их движок):

– для Firefox очень неожиданно приходится прибегать к суперхаку:

– ну и, разумеется, IE выделяется:

3. Далее делаем стили по дизайну, ничего особенного

Работающий пример css select

В вёрстке я использую фрейворк Compass, поэтому пример сделан на SCSS. Но в целом, это конечно, легко сделать и на CSS, следуя принципу, изложенному выше или просто открыв приведенный здесь пример в инструментах разработчиков и посмотреть скомплированный css код для элемента select.

Для того, чтобы указать и градиент и изображение для управляющего элемента, я использую @mixin background фрэймворка Compass. На сервисе codepen этот миксин как-то неадекватно генерирует css, поэтому мне пришлось зайти на официальный сайт Compass и скопировать исходный код @mixin background. В обычной своей вёрстке я не прописываю его, так как этот миксин разработчики фреймворка уже написали за меня (я лишь импортирую файл @import “compass”).

UPD 25.06.14 о firefox

С выходом 30 версии firefox данный пример перестал работать.

Исправлено некорректное применение отступов к элементу <select>. До этого отступы ошибочно помещались снаружи выпадающего списка (963970).

Пока Firefox исправляет свои ошибки, но не в значении свойства appearance, нам остается забыть этот пример с хаком и пользоваться далее по старинке способами:

  • JavaScript замена элемента select
  • Select с обертывающим элементом (ну тоже вполне рабочий вариант пока)
  • Если же хочется пользоваться именно этим примером и в firefox с точки зрения дизайна могут быть небольшие отхождения (или поправить ранее созданные проекты очень сложно путем изменения разметки), то можно скрыть в стилях вашу кастомную стрелку именно в firefox:
     

Может все же когда-нибудь свойство appearance будет работать с select’ми, так как от него многие того ожидают и так как это происходит в WebKit:  https://bugzilla.mozilla.org/show_bug.cgi?id=605985

UPD 10.05.16 о firefox

Ура, разработчики Firefox исправили баг, что не давал работать этому примеру (см. UPD выше)

Поделитесь с друзьями:

Читайте также:

Комментируйте:

  • Дмитрий

    не работает ваш работающий пример

    • http://positivecrash.com/ Настя Бакай

      угу. после какого-то обновления firefox сломался. что сказать, это минус любых хаков. опять придется что-то искать или дивов обертывающих городить(

    • http://positivecrash.com/ Настя Бакай

      Не знаю, насколько для вас сейчас актуальна верстка select, но с мая 2016 appearance работает и в Firefox: https://bugzilla.mozilla.org/show_bug.cgi?id=605985
      Соответственно, и этот пример остается актуальным для новых версий Firefox.