Ранее я уже рассказывал об элементе
<selectmenu>. Это предложение от группы OpenUI, которое было призвано решить проблемы стилизации <select>. Новый элемент использует некоторые идеи веб-компонентов и композицию, чтобы можно было собрать и стилизовать выпадающий список с выбором под свои нужды. С 97 версии Chrome и Edge новый элемент можно опробовать за флагом.Спустя какие-то время, в результате дискуссий в репозитории OpenUI, было принято решение переименовать элемент с
<selectmenu> на <selectlist>. По мнению некоторых участников дискуссии, menu в названии может привести к неверному пониманию назначения элемента у разработчиков. Из-за этого элемент могли использовать для создания различных типов меню, а это не то, для чего задуман новый элемент. Меню — это совершенно другой паттерн и семантика.В какой-то момент с сайта OpenUI пропало предложение что по
<selectmenu>, что по <selectlist>. По старым ссылкам располагается страница, которая предлагает перейти на другое предложение — Stylable Select Element. В его URL всё ещё содержится selectlist, а из дискуссий становится ясно, что перед нами дальнейший этап инкубации на тему стилизации <select>. В новой итерации прнято решение использовать существующие элементы вместо добавления новых. Предлагается использовать комбинацию
<select>, <button>, <datalist> и <option> для создания стилизуемых вариантов.<label for="country">Country</label>
<select id="country">
<button>
<selectedoption></selectedoption>
</button>
<datalist>
<option value="us">
<img src="usa.jpg" alt="flag of USA">
USA
</option>
<option value="de">
<img src="germany.jpg" alt="flag of Germany">
Germany
</option>
<option value="es">
<img src="spain.jpg" alt="flag of Spain">
Spain
</option>
</datalist>
</select>
Наличие внутри
<select> элемента <button> и/или <datalist> является сигналом для парсера, что это стилизуемый вариант и с ним нужно работать иначе. Это подразумевает доработку парсера, потому что сейчас всё, кроме <option>, <optgroup> и <hr> игнорируется. В CSS предлагают добавлять
appearance: base-select, чтобы сообщать браузеру, что это не обычный селект, а стилизуемая версия. Дополнительно предлагается добавить псевдо-классы :open и :closed, тип кнопки type="popover", элемент <selectedoption> для отображения выбранного варианта и много чего ещё. Более подробно об этом можно узнать в самом предложении Stylable Select Element.