#новость дня

Я терпел с 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