Стилизация select с помощью CSS

Нельзя просто так взять и стилизовать select. Тут нужно идти обходными путями. Допустим, что мы хотим заменить изображение кнопки со стрелочкой вниз в select. Напрямую css не позволяет этого сделать, нам придётся схитрить. Мы поместим  select внутрь div-а. У div-а сделаем невидимым содержимое, выходящее за его границу, ( overflow: hidden; ) и зададим ему точные размеры. Сам select сделаем с прозрачным фоном ( background: transparent; ). Теперь можно задать фоновую картинку для div-а и выровнять её вправо, тогда она будет вместо кнопки со стрелкой вниз ( background: url(cbx-selector.png) no-repeat right #c0c3ff; ) и она будет видна сквозь прозрачный фон select-а. Теперь важно задать select-у такую ширину, чтобы кнопка вышла за границу div-а и стала не видна на экране.

Вот итоговый файл стилей:

И HTML-файл:

Результат можно посмотреть здесь:

https://urvanov.ru/projects/css-examples/input-type-select/


Поделиться:
1 Звезда2 Звезды3 Звезды4 Звезды5 Звезд (Пока оценок нет)
Загрузка...

Стилизация select с помощью CSS: 4 комментария

  1. если размер текста больше заданной ширины селекта получаются траблы. кривое решение.

    1. select {
      appearance:none;
      -moz-appearance:none; /* Firefox */
      -webkit-appearance:none; /* Safari and Chrome */
      }
      Отключаем всё дефолтное оформление.
      После этого уже можно добавлять фоновое изображение для стрелок справа
      background: url(https://cdn2.iconfinder.com/data/icons/font-awesome/1792/sort-16.png) no-repeat right #fff;
      background-position-x: 99%;
      и прочее оформление

      Главный минус — проблема позиционирования системных выпадающих списков. Они смещаются по разному в разных браузерах и исправить это мне не удалось.

  2. Вообще круто, спасибо, но есть проблема, если объектов много, то их через size=»%» в скролл не загонишь, они начинают появляться в самом поле.

Добавить комментарий

Ваш e-mail не будет опубликован.

*