У элемента
<select> есть ряд дополнительных возможностей, которые крайне редко используются. Причина та же, по которой разработчики не любят сам <select>: невозможность стилизации. К счастью, эта проблема уже решается.Тем не менее, об этих возможностях полезно знать, потому что грядёт обновление, которое ещё больше расширит возможности стилизации. Об этом расскажу в следующем посте, а пока поговорим об атрибутах
size и multiple.Стандартный
<select> отображается в виде блока с выбранным значением и небольшой стрелкой. При нажатии отображается выпадающий список с опциями. Выбор опции закрывает список и меняет текущее значение в блоке.Если установить атрибут
size со значением >1, то вместо блока с выпадающим списком отобразится прокручиваемый контейнер с опциями — listbox. Атрибут определяет, сколько опций должно быть видно в виджете.Нажатие по опции делает её выбранной и снимает выбор с другой опции. При фокусе на listbox выбранную опцию можно менять стрелками вверх/вниз. По смыслу похоже на группу радио-кнопок, но listbox реализует другой паттерн.
Атрибут
multiple включает множественный выбор опций. Как и с атрибутом size >1, при добавлении multiple вместо блока с выпадающим списком будет отображаться listbox. По смыслу это аналог группы флажков.Нажатие по опции выбирает её, но не снимает выбор с других. Повторное нажатие по выбранной опции снимает выбор. Меняется поведение клавиатуры: стрелки навигируются по опциям, а
Space выбирает/снимает выбор.Также добавляются дополнительные клавиши и сочетания для более удобной работы с несколькими опциями. Описывать все сочетания не буду, подробнее о них можно узнать в разделе клавиатурной навигации паттерна listbox.
По умолчанию
<select multiple> отображается как listbox с 4-мя видимыми опциями. Атрибут size можно использовать в сочетании с multiple для переопределения стандартного количества видимых опций.Таким образом, в браузерах есть listbox со встроенной доступностью, поведением и клавиатурной навигацией. Однако его невозможно стилизовать и есть некоторая неконсистентность поведения между разными браузерами.
#ydkhtml