В понедельник я рассказывал об атрибутах
size и multiple элемента <select>, которые позволяют превратить его в listbox и добавить множественный выбор опций. Это была подводка к сегодняшнему посту о стилизации listbox.В Chrome 135 добавили поддержку стилизации элемента <select> на основе предложения «Customizable Select Element» от OpenUI. Сейчас это работает только с обычным
<select>, атрибуты size и multiple не поддерживаться.Команда Chrome продолжает работу и поделилась намерением внедрить стилизованный listbox. Это добавляет поддержку атрибутов
size и multiple, делая listbox и его опции полностью стилизуемыми.Брехт Де Рют написал у себя в блоге про грядущее обновление <select> со множественным выбором. Статья описывает некоторые изменения поведения мыши и клавиатуры, а также приводит примеры стилизации.
Как и с обычным
<select>, свойство appearance: base-select меняет режим отрисовки виджета. Вместо системного компонента, который зависит от ОС, рисуется виджет на основе HTML и CSS с минимальными стилями.В таком режиме появляется доступ к внутренним частям компонента, опциям, галочке выбранной опции, а также возможность вкладывать внутрь
<select> и <option> другие HTML-элементы, например <svg> или <img> для иконок.Меняется взаимодействие мышью и клавиатурой. Не нужно удерживать
Ctrl при клике для выбора/снятия выбора с опции. Но теряется сочетание Ctrl + A и Ctrl + Arrow для выбора всех опций разом и последовательного выбора.Что касается стилизации, то показан красивый интерфейс выбора жанров музыки, который выполнен в виде сетки. Это достигается за счёт возможности обернуть все опции в
<div> и добавить ему свойства CSS Grid.Следующий пример в статье показывает сочетание атрибутов
multiple и size="1". В этом случае рисуется <select> с выпадающим списком и флажками у опций. В режиме base-select доступны все расширенные возможности стилизации.Пример иллюстрирует выпадающий список выбора ревьюверов. У каждой опции есть красный или зелёный индикатор, аватар пользователя, имя и фамилия. А весь виджет выполнен в «стеклянном» стиле с полупрозрачностью и размытием.
Возможности стилизации listbox планируют добавить в Chrome 145, который должен выйти уже сегодня. Но остаются некоторые нерешённые вопросы с элементом
<selectedcontent>, который отображает выбранную опцию внутри <select>.Дискуссии продолжаются. Брехт в конце статьи оставил ссылку на issue с обратной связью и поделился своими идеями. Другие браузеры пока не внедрили стилизованный
<select>, но работы по внедрению начались в Firefox.#html #css #ui
