#новость дня
Я терпел с 26 марта! Потому что именно 26 марта Google должны были объявить о запуске Google Chrome 135, в котором поддержка кастомизации нативного select перестаёт быть экспериментальной!
Но 26 марта, несмотря на помпу новости, они раскатили обновление лишь на малый процент пользователей.
И вот, наконец, долетело и мне! Срочно тестирую: https://developer.chrome.com/blog/a-customizable-select
Кастомные селекты прошли огромный путь от идеи забить на всё и делать новый элемент до переписывания нативного селекта.
И я, честно говоря, даже не уверен, что лучше. У нативного селекта есть большое преимущество — его не ограничивает размер окна. И даже какой-никакой поиск с клавиатуры есть, ну и управление.
Впрочем, на этом преимущества заканчиваются.
А вот в новом селекте можно даже HTML писать в option!
Есть даже дока на MDN: https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Forms/Customizable_select
Поддерживается, правда, пока только в Chrome, потому что реализован новый селект на CSS anchor positioning API.
Крайне рекомендую сначала с этим API ознакомиться, потому что ни одна из демок гугла не умеет правильно определять границы экрана :)
Мы в @htmlshitchat попробовали собрать демо: https://jsbin.com/yizawexeyi/edit?html,css,output
Ну такое, если честно. Могли бы хоть для презентации постараться и применить position-try на выпадающий список.
А, и да. В неподдерживаемых браузерах селект просто фолбэчится до нативного. И все счастливы.
Кроме заказчиков.
#select #custom
>>Click here to continue<<