HTML, CSS: Делаем стильный тег Select Box с помощью CSS опубликовал Радик Алиев категория  
просмотры 136 088

HTML, CSS: Делаем стильный тег Select Box с помощью CSS

Мне часто приходится использовать Select Box ( <select>) при создании формы с наличием выпадающего списка. Мне потребовалось время, чтобы выяснить, как легко и просто можно задать стиль Select Box-а с использованием лишь CSS, поскольку некоторые части зависят от браузера, например, выпадание вниз и не редактируются стандартным набором стилей.

Так выглядит Select Box по умолчанию:

А вот его HTML код:

В Select-Box-е есть определённые параметры, с помощью которых Вы можете сделать стилизацию select и которые можно настраивать, например, цвет шрифта, границы, цвет, отступы и фон:

Но раздражающая стрелка выпадающего списка всегда остаётся одной и той же. Не существует прямого способа изменить её стиль, но обходной путь довольно прост.


Сначала нам нужно окружить наш Select Box div-контейнером:

Далее нужно добавить немного CSS, чтобы убедиться, что элементы Select Box-а оформлены определённым образом:

Необходимо убедиться, что Select Box занимает больше места, чем окружающий его div, так, что стрелка по умолчанию исчезает.

Вот новая стрелка, которую я хочу использовать:

Наш div-контейнер должен быть настроен таким образом, чтобы новая стрелка появлялась там, где мы хотим:

Теперь наш красивый  Select Box выглядит так:

Дизайн стрелки можно скачать в интернете или сделать в фотошопе. Зная этот небольшой обходной путь, вы сможете намного легче задавать стиль Select Box-а в точности так, как вы хотите, чтобы он выглядел, с использованием одного лишь CSS.

Друзья смотрите другие полезные статьи CSS, HTML, jQuery:

Новые материалы для пользователей WordPress:

Удачи и хороших зароботков Друзья!

Теги:

22 Комментарий

Оставить комментарий
  1. Krug Январь 18, 2013 at 1:02 пп #

    Вот это прикольно!!! Уже поставил на сайте. Спасибо!

  2. Радик Алиев Январь 18, 2013 at 5:45 пп #

    Cool

  3. Наталья Декабрь 20, 2013 at 4:39 пп #

    Ой, молодца!!!!! Получилось все так, как и хотелось!

    • Максим Декабрь 25, 2013 at 3:04 пп #

      Bad! Текст налазит на стрелку, а ето очень плохо.

      • Gennady Декабрь 25, 2013 at 11:04 пп #

        Максим, увеличьте ширину из примера width: 268px; на нужную вам

  4. Владимир Январь 2, 2014 at 11:47 пп #

    Все хорошо, только в Opere не работает 🙁

  5. Tim Январь 5, 2014 at 7:40 пп #

    Да, в Опере нужно добиться хотя бы стандартного отображения стрелки, а так там совсем беда. Нужно именно хитрое решение какое-то.

  6. Виктор Январь 20, 2014 at 11:07 пп #

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

    • Gennady Январь 21, 2014 at 1:02 дп #

      попробуйте добавить css свойство

      — центрует элемент у которого задана ширина

  7. Danil Март 2, 2014 at 2:42 дп #

    круто это конечно да …!!!
    но вот как сделать также или примерно также что бы не только в хроме и сафари поддерживалось… ????

    • Gennady Март 2, 2014 at 4:40 пп #

      использовать javascript и замену элемента формы select другими html элементами (по нужному событию — значения подставляется в скрытый select или input type=hidden элемент)

      кучу решений, вот пару вариантов
      jqtransform: пример тут http://www.euro-l.ru/calc/ (в форме расчета стоимости натяжного потолка)
      bootstrap: http://getbootstrap.com/2.3.2/components.html#buttonDropdowns (пример из документации по bootstrap)

  8. baxye Апрель 15, 2014 at 4:10 дп #

    вольный перевод этой статьи http://bavotasan.com/2011/style-select-box-using-only-css/ но вот автор не указан…ай-яй

  9. Константин Июнь 16, 2014 at 6:07 дп #

    Да Вы масштаб браузера подвигайте, и спрятанная стрелка select опять появиться, и сам список в ширину становиться больше!!!

  10. Serg Июль 4, 2014 at 3:38 пп #

    Кто нибудь нашел решение для Opera без JS?

  11. Алекс Июль 10, 2014 at 7:31 дп #

    Сразу видно писали под Хром, -webkit-appearance: none; только в нём и работает … Так себе решение

  12. Вадим Сентябрь 6, 2014 at 12:35 пп #

    Подскажите а как сделать расстояние больше между строчками выпадающего списка?
    Вот вставляю такой код
    option {
    background: orange;
    padding: 10px 0 !important;
    }
    Цвет списка меняется, а расстояние нет.

    • Gennady Сентябрь 6, 2014 at 1:51 пп #

      попробуйте line-height, height

  13. Игорь Июль 19, 2015 at 8:50 пп #

    Чего оно такое корявое у тебя получилось?!

  14. Tochcha Апрель 4, 2016 at 10:47 дп #

    Решение бесподобное по своей простоте!!! Спасибо!

  15. Tochcha Апрель 4, 2016 at 4:13 пп #

    Единственный минус — если текст в option длиннее чем блок — текст налазит на стрелку

  16. Дмитрий Июнь 26, 2016 at 4:28 пп #

    select {
    background: transparent;
    outline : none;
    overflow : hidden;
    text-indent : 0.01px;
    text-overflow : »;
    -webkit-appearance: none;
    -moz-appearance: none;
    }

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

    И ширину селекта можно оставить в 100% от родителя. (чтобы option не распирало)

  17. айнур Апрель 30, 2017 at 11:23 пп #

    Стилизация селекта тут
    http://phpjs.ru/2017/02/28/customize-select/

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

vk_like_site