Как стилизовать select option css

Стилизация Select-Option (почти) без JavaScript

Стилизация некоторых стандартных элементов — довольно нетривиальная задача.

Разумеется, хороший специалист может стилизовать что угодно, однако всё упирается в сложность этого действия.

Для стилизации радиокнопок и чекбоксов потребуется совсем немного времени — идея стилизации label со скрытыми input не нова, и давно и повсеместно используется.

Для стилизации остального — есть JavaScript.

Сегодня я хочу рассказать Вам о том, как можно относительно просто стилизовать выпадающие списки, с минимальным кодом JavaScript (от 0 до 26 строк) и минимальной дополнительной разметкой HTML.

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

И вот, когда я уже почти закончил писать очередную жуткую конструкцию, призванную заменить несчастный Select, у меня возник вопрос:

А зачем?

Обычно этот вопрос ведёт к умудрённой прокрастинации, переосмыслению жизни и т.д., но в этот раз что-то пошло не так, и я понял, что вопрос и правда был хорошим, а главное — полезным.

Небольшой ликбез:

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

Выпадающие списки состоят из 2 основных элементов:

1. Select — контейнер для всего списка
2. Option — элемент списка

Основной функционал выпадающего списка — отправка информации о выбранном(ых) пункте(ах) на сервер.

Для полноты картины, вот список атрибутов элементов (чтобы можно было оценить, сколько из них будут реализованы):

1. Select — disabled , form , multiple , name , required , size
2. Option — disabled , label , selected , value

Уже было написано немало слов, поэтому — ближе к коду:

Итак, чем же хорош этот код? (всё, без чего можно обойтись при объяснении, убрано специально)

Давайте отметим, какие пункты из функционала Select и Option автоматически стали возможны, за счёт использования input + label:

1. Select — form, name, required
2. Option — disabled, label, selected, value

1. Select — disabled, multiple, size
2. Option — полностью реализовано

Чтобы реализовать пункт Select.multiple (множественный выбор) — достаточно сделать так:

Мы всего-навсего меняем тип input’ов с Radio на Checkbox, и получаем практически полный аналог multiple.

Разница в том, что для множественного выбора не нужно зажимать ctrl (ну а если кто-то хочет полностью имитировать функционал — JavaScript в помощь).

Что осталось?

1. Select — disabled, size
2. Option — полностью реализовано

• Select.size — какой зададите размер, такой и будет. Необходимо будет просто добавить контейнер.
• Select.disabled — для контейнера нужно добавить pointer-events: none , чтобы отменить реакцию на любые действия пользователя (наведение, клики и т.д.), ну и можно сделать его чуть прозрачным.

Нужно также добавить автозаполнение заголовка для выпадающего меню с единственным выбором, а также возникнет проблема при сбросе формы (кнопка Reset), т.к. заголовок не сбросится. Но и это — вполне решаемо (с помощью JavaScript).

А теперь — примеры:

Немного реализации (выпадающее меню с единичным выбором):

И ещё немного (не выпадающее меню с множественным выбором):

Бонус: не знаю, зачем я это сделал, но… выпадающее меню с единичным выбором и работающим на CSS сбросом заголовка:

Зачем это нужно?

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

При стилизации выпадающих списков вида:

есть серьёзные ограничения стилизации. Поэтому их заменяют на простые списки:

которым с помощью JavaScript навешивают весь необходимый функционал.

Поскольку изначально списки никак не взаимодействуют с формами, из-за этого возникают проблемы.

Мало того, что необходимо реализовать весь основной функционал:

• переключение пунктов и их взаимодействие
• состояния (checked, disabled)
• привязка к форме и отправка данных на сервер
• инициализация исходных данных (автозаполнение)
• сброс формы (при нажатии на кнопку «reset» список нужно вернуть в состояние при инициализации)

Фактически, если в JavaScript что-то ломается, не важно, из-за чего — скрипт не догрузился, возник баг, внесли правки — при возникновении любой проблемы выпадающий список превращается в… что-то, выглядящее как выпадающий список, но не работающее.
Вообще. Никак.

Для пользователя это будет выглядеть так: есть выпадающий список, но работать с ним нельзя.

Для сервера это будет выглядеть ещё «веселее» — пришла форма, в которой не хватает части данных. Хорошо, что такую ситуацию заранее предусмотрели при разработке… Ведь предусмотрели, правда?

Плюсы получившегося решения:

• Весь основной функционал (смотри выше), кроме сброса заголовка ВСЕГДА будет работать. Даже если у человека вообще отключён JavaScript (хоть это и стало практически неактуально). Единственное, что может пойти не так — нельзя будет открыть список. Но и в этом случае отправится значение по умолчанию, плюс смену состояний — список открыт/закрыт — можно реализовать прямо в коде html (защита от проблем с файлом JS), или вообще открывать по наведению.
• Данного функционала достаточно для большинства подобных списков. Да, возникнут проблемы у людей, использующих дополнительный функционал (об этом ниже). Но в случае со списком на ul — li для работы и вовсе требуется библиотека, и много что может пойти не так.

Минусы (доп. функционал, который не реализован, и добавляется JavaScript’ом / библиотеками):

• Переключение с помощью tab
• Управление стрелками (в стандартном select можно менять выбранный пункт кнопками вверх-вниз)
• Озвучка скринридерами (для людей, у которых проблемы со зрением текст на странице озвучивается)
• Не работает как нативный select на мобильных (на мобильных select довольно удобно работает сам по себе. При желании можно определять устройство и подменять на стандартный select)
• Список не умеет выпадать вверх, если снизу край вьюпорта (JS сделает это)
• Группировка пунктов (аналог OptGroup) (сложно, и очень редко встречается)

Как видно, ничто из вышеперечисленных минусов не является критичным для подавляющего большинства списков, и при необходимости реализуется с помощью JavaScript, а потому.

Добро пожаловать в мир, где Ваши библиотеки для стилизации Select-Option-подобных списков станут чуточку меньше, а работа с этими списками без библиотек — почти комфортной!

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

Стилизация select

Стилизация select на чистом CSS без использования сторонних библиотек или JavaScript кода. А также бонус: рассмотрим как стилизовать select option при помощи JavaScript и jQuery.

Стилизация select

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

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

Стилизация для нашего select.

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

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

Appearance CSS

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

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

Стилизация select option

Для того чтобы стилизовать select option нам потребуется JavaScript. Начнём с HTML и CSS.

Перед JavaScript-кодом должен быть подключен jQuery.

Input select

Более простой вариант при помощи input. Данный вариант мне нравится больше.

Проверка открыт ли select

Будем изменять положение стрелки в зависимости от того открыт или закрыт select.

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

Надеюсь, вам понравилась данная информация. Если вам интересна тема web-разработки, то можете следить за выходом новых статей в Telegram.

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

Статьи из данной категории:

Комментарии ( 5 )

Здравствуйте, спасибо за такой пример и скрипт, но я попробовала его использовать, и заметила недочёты..
1. При загрузке страницы по умолчанию уже должно быть какое-то значение. Это не доработано в скрипте. Мне кажется вот здесь text:
_this.children(‘option:disabled’).text() должно быть не disabled, а
_this.children(‘option:selected’).text()
2. Первый по порядку option считается 0-й, то есть цикл нужно начинать с 0, а не с 1
for (let i = 0; i < selectOptionLength; i++) и т.д..
Иначе в псевдоселект добавляются пункты все, кроме первого
3. Мне кажется, что нужно добавить закрытие псевдоселлекта при клике вне этого блока. Потому, что если селекты расположенны рядом, то могут наезжать друг на друга открытые.
Спасибо!

Здравствуйте, Оксана. Спасибо за выявление недостатков скрипта. Как будет время, обязательно код будет исправлен и улучшен.

Здравствуйте! Подскажите, пожалуйста, в чем может быть причина, что не работает js код для селект нигде кроме хрома и сафари?

Здравствуйте, Анастасия. Представленный код работает во всех современных браузерах.

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

Стилизация Select с помощью css, как будто это 2020

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

Как выясняется, разумный набор стилей для select можно создать согласованно и привлекательно для новых браузеров, не меняясь при этом и в старых.

Быстрый Пример

Вот элемент select без стиля . Он будет выглядеть немного иначе, в зависимости от браузера, который вы используете.

Элемент select без стиля

Ниже представлен тот же элемент select, стилизованный непосредственно с помощью CSS. Никаких дополнительных элементов обертки или псевдоэлементов не требуется (за исключением одного, который необходим для IE10 +):

Код

HTML-код для приведенного select приведен ниже. Обратите внимание, что CSS применяется к любому select с классом select-css.

А вот CSS, управляющий select:

Примечания по CSS

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

• Select Устанавливается на display: block; по умолчанию, но вы можете поменять его, display: inline-block; width: auto; если хотите, чтобы он сидел рядом с label.
• Фон select создается с использованием двух фоновых изображений: первое — это значок стрелки svg (выраженный в виде URI данных), а второе — повторяющийся линейный градиент. Любой URL может быть внешним изображением, если хотите. Если вы меняете изображение значка, имейте в виду, что его размер установлен в первом разделе последующего background-size: .65em auto, 100%; свойства. И его положение задается через background-position: right .7em top 50%, 0 0;(который находится .7em с правой стороны, соответственно). Кроме того, если размер изменяется, вы можете захотеть сделать более правый отступ для кнопки, чтобы она не перекрывала select текст, но имейте в виду, что в IE9 и более ранних версиях пользовательская стрелка не появится и браузер по умолчанию Стрелка будет отображаться слева от отступа, поэтому не добавляйте слишком много, иначе стрелка IE9 будет вставлена ​​очень далеко.
• Важно сохранить линейный градиентный фон, потому что его наличие на самом деле мешает IE9 и старше распознавать свойство background, и в результате он не будет показывать пользовательский значок рядом со своим невидимым собственным. Если вы хотите плоский цвет, используйте линейный градиент между двумя одинаковыми значениями цвета.
• Appearance Правило и его и приставочные версии имеют важное значение, чтобы сбросить стили некоторых браузеров по умолчанию.
• font-size: 16px; Правило важно , потому что IOS Safari будет увеличивать его в макете сайта , если select текст меньше 16px. Обычно такое поведение раздражает, поэтому мы стараемся избегать его с размером шрифта 16 пикселей на select.
• .select-css::-ms-expand Правило предписывает IE11 и IE10 , чтобы скрыть псевдоэлемент меню значка, поэтому может появиться пользовательский значок позади него.

Как это выглядит в разных браузерах

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

Firefox
Chrome
Safari
Edge
Internet Explorer 11
Internet Explorer 10
Internet Explorer 9
Internet Explorer 8
iOS Safari
Android Chrome

Наслаждайтесь!

Обновление статьи 3.06.20

Стилизация пунктов option

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

1. С помощью jquery

2. С помощью стилизации label со скрытыми input

3. С помощью списка li и скрытого input

Стилизация — это конечно хорошо, но доступность нужна не меньше.

Заменяя стандартные элементы управления самодельными, придется реализовывать штатные возможности самостоятельно.
В последних двух приведенных примерах без мыши/тачскрина (с помощью клавиатуры/скринридера) сделать ничего нельзя. Скринридер в режиме чтения тоже ограничен. После долгих изысканий в дизайне и функционале я пришел к выводу, что лучше просто оставить select как есть.

Стилизация select на CSS

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

HTML разметка для select

Тег select поместим внутри тега div с классом select. Создадим две опции, между которыми и должен происходить выбор.

Вот так select выглядит в браузере Chrome, без стилизации. Однако, с помощью CSS стилей, мы слегка его приукрасим: увеличим размер поля, отступы, цвет и стиль рамки, шрифт.

CSS для select

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

.select <
position: relative;
>

Стилизуем тег select. С помощью свойства appearance, убираем стандартные стрелочки у элементов формы. Затем добавляем для него вендорные префиксы для браузеров Chrome и Safari нужен –webkit, а для Firefox -moz.

.select select <
display: block;
width: 100%; /* от ширины блока div */
padding: .75rem 2.5rem .75rem 1rem;/* отступы от текста до рамки */
background: none; /* убираем фон */
border: 1px solid #ccc; /* рамка */
border-radius: 3px;/* скругление полей формы */
-webkit-appearance: none;/* Chrome */
-moz-appearance: none;/* Firefox */
appearance: none;/* убираем дефолнтные стрелочки */
font-family: inherit;/* наследует от родителя */
font-size: 1rem;
color: #444;
>

Воссоздадим убранную стрелочку при помощи псевдоэлемента after, применив разные свойства border. При клике внутри поля, показывается выпадающий список, за исключением при клике по самой стрелочке. Свойство pointer-events: none; отменяет стандартное поведение при клике по элементам, прописав которое, теперь при клике по стрелочке, так же появится, выпадающий список.

.select:after <
content: «»;
display: block;
border-style: solid;
border-width: 6px 5px 0 5px;
border-color: #000 transparent transparent transparent;
pointer-events: none;
position: absolute;
top: 50%;
right: 1rem;
z-index: 1;
margin-top: -3px;
>

Ниже, я приведу два варианта, как вставить уникальную стрелочку, при верстке макета, если её нарисовал дизайнер. Вместо стрелочки на CSS, можно добавить стрелочку в виде картинки в пустые кавычки content.

Демонстрация примера

Стилизация select option

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

Заключение

Однако лучшим решением на 2019 год – это конвертировать иконку в SVG формат и вставить фоном. Такой вариант, гарантирует качественное изображение на любых разрешениях и разных масштабах.

В видеокурсе «Вёрстка сайта с нуля 2.0», я показываю на живом примере, как верстать сайт по макету.

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

Она выглядит вот так:

Комментарии ( 1 ):

вместо .. .top: 50%; margin-top: -3px; .. лучше .. top: calc(50% — 3px); ..

Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.