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

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

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

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

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

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

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

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

А зачем?

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

---

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

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

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

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

Иногда используется ещё и OptGroup (группа элементов списка), но его реализация пока что остаётся на JavaScript’е.

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

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

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

На этом, пожалуй, закончим с описанием, и перейдём к реализации.

---

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

<form>   <div class="content">     <h3 class="title">Описание 0 пункта</h3>      <input id="selectName0" type="radio" value="0" name="selectName" />     <label for="selectName0">Описание 0 пункта</label>     <input id="selectName1" type="radio" value="1" name="selectName" />     <label for="selectName1">Описание 1 пункта</label>     <input id="selectName2" type="radio" value="2" name="selectName" />     <label for="selectName2">Описание 2 пункта</label>   </div> </form> 

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

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

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

И вот всё, что остаётся реализовать:

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

Всего лишь добавлением связок input + label, мы сократили список необходимого функционала с 10 пунктов до 3. Неплохо, но ведь это не конец, верно?

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

<form>   <div class="content">     <input id="selectName0" type="checkbox" value="0" name="selectName" />     <label for="selectName0">Описание 0 пункта</label>     <input id="selectName1" type="checkbox" value="1" name="selectName" />     <label for="selectName1">Описание 1 пункта</label>     <input id="selectName2" type="checkbox" value="2" name="selectName" />     <label for="selectName2">Описание 2 пункта</label>   </div> </form> 

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

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

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

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

Ну что ж, и Select.disabled и Select.size предельно просто реализуются с помощью CSS:

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

Итак, основной функционал есть. Что же осталось?

Осталось добавить автозаполнение заголовка для выпадающего меню с единственным выбором, и… всё! Почти.

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

---

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

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

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

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

---

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