н#
evgeny shev
карочи я понял делай як хочиш главное шо бы работало. И пошли все в жопу. Я когда увидел шо под селектом верстают div ами тоже самое, потом прячут селект, задают этим дивам стили и вешают на место селекта чуть не укакался
иначе никак,
Кастомные селекты
Плохие новости: если вам понадобился селект с иконками, то либо вам, либо вашим пользователям придётся пострадать.
1️⃣ Что не так со стилизацией нативных селектов. Если коротко — стилизировать можно мало что, а кроссбраузерная поддержка отвратительная: The Current State of Styling Selects in 2019
2️⃣ Нюансы поведения селектов, к которым мы интуитивно привыкли (и которых в кастомных селектах обычно нет). Например, если ткнуть в <select> со странами и начать вводить название страны, то <select> выберет подходящую страну — даже если он закрыт: <select> your poison
3️⃣ Нюансы хорошего кастомного селекта (их куча). Например, для поддержки autofill в браузере нужно создавать скрытый <select>: тред автора Parcel
***
Хорошие новости: с этим можно что-то сделать.
1️⃣ Взять тег <datalist>. Если вам нужен просто селект с автодополнением, посмотрите на <input> с <datalist> — может быть, он решит проблему: datalist
2️⃣ Взять reach/listbox или reach/combobox. Reach UI — это набор компонентов от авторов react-router, который фокусируется на accessibility. Listbox работает как нативный <select>, а Combobox — как <input> с <datalist>; и оба хорошо кастомизируются: Listbox · Combobox
3️⃣ Следить за веб-платформой. Полгода назад команда Edge выяснила, что из всех нативных контролов селекты вызывают больше всего боли: Can we please style the <select> control?! После этого лёд тронулся — разработчики браузеров начали обсуждать, как улучшить нативные формы: WICG/open-ui
