0Pricing
HTML Academy · Урок

Элемент selectlist

Настраивайте элементы управления выпадающими списками с помощью предлагаемого элемента selectlist

«Элемент selectlist» — бесплатный урок HTML Academy на CoddyKit. Это урок 3 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения HTML Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс HTML Academy содержит 4 уроков всего.

Давнее ограничение

Элемент <select> — один из немногих элементов формы, внешний вид которых нельзя настроить. Браузер игнорирует любое применённое к нему правило CSS — пользовательские границы, шрифты и стили вариантов — что привело к появлению тысяч библиотек «пользовательских списков», дублирующих встроенное поведение лишь ради стилизации вариантов.

Что такое selectlist

<selectlist> (также встречается название <selectmenu>) — встроенный элемент HTML, созданный как настраиваемая замена <select>. Он использует ту же концептуальную модель — кнопку запуска и список вариантов, — но каждую его часть можно настроить с помощью CSS.

<selectlist>
  <option>Apple</option>
  <option>Banana</option>
  <option>Cherry</option>
</selectlist>

Части, которые можно стилизовать

selectlist предоставляет кнопку — элемент запуска в закрытом состоянии, список вариантов — раскрывающийся список, — и сами варианты. Псевдоэлементы CSS (::part(button), ::part(listbox)) позволяют настраивать каждый из них, не изменяя встроенное поведение.

Настройка вариантов

Варианты внутри selectlist могут содержать произвольное содержимое — значки, описания и пользовательскую раскладку, а не только текст. Браузер по-прежнему управляет выбором, навигацией с клавиатуры и фокусом, а вы можете свободно управлять внешним видом.

Сохранение встроенного поведения

selectlist сохраняет всё, что хорошо умеет <select>: навигацию с клавиатуры — стрелки и ввод текста для быстрого поиска, — объявления для программ чтения с экрана, участие в форме и управление фокусом. Вы получаете доступное поведение и можете поверх него настроить интерфейс.

Пользовательская кнопка

Предоставьте слот для кнопки запуска: <button slot="button">Choose fruit <svg>...</svg></button>. Кнопку можно полностью оформить самостоятельно: заменить встроенный треугольник пользовательским значком, добавить подписи и изменить цвета. Браузер по-прежнему управляет открытием и закрытием.

Участие в отправке формы

selectlist участвует в отправке формы так же, как select: у него есть атрибут name и значение value, и он отправляется вместе с формой. Обработка на стороне сервера идентична. На уровне разметки это непосредственная замена для большинства случаев использования select.

Поддержка браузерами

selectlist — возможность на раннем этапе развития. По состоянию на 2026 год она доступна в браузерах на основе Chromium с включёнными флагами или в ограниченном виде. Firefox и Safari пока её не поддерживают. Для использования в рабочих проектах нужен резервный вариант с обычным <select> для неподдерживаемых браузеров.

Сложность создания полифилла

Создать полностью доступный пользовательский список, соответствующий встроенному поведению, сложно: нужно реализовать удержание фокуса, навигацию с клавиатуры, интеграцию с программами чтения с экрана и участие в отправке формы. Библиотеки вроде Downshift, Combobox и react-aria решают эту задачу, используя тысячи строк кода. selectlist заменяет всё это одним элементом.

Когда внедрять

Для внутренних приложений или развертываний только на Chromium элемент selectlist уже сегодня позволяет существенно сократить объём кода. Для общедоступных сайтов с широкой аудиторией дождитесь поддержки в Firefox и Safari либо используйте библиотеку-обёртку, которая применяет selectlist там, где он поддерживается, а в остальных случаях переключается на настраиваемый список React/Vue.

План перехода

После того как selectlist будет доступен повсеместно, ожидайте, что множество библиотек для создания настраиваемых списков объявят устаревшими или превратятся в тонкие обёртки над встроенным элементом. Следите за процессом стандартизации: API уже неоднократно пересматривался и может продолжать меняться до окончательного утверждения стандарта.

Что это означает для дизайна

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

Проверка знаний

Почему элемент selectlist важен — какое ограничение встроенного