Это невозможно при текущей поддержке тега select
в текущей версии HTML.Единственное возможное решение здесь - это использовать заказное решение, доступны как ванильные CSS, так и опции javascript, и у вас есть множество методов на выбор.
Всякий раз, когда я сталкивался с необходимостью создания собственного решенияМне нравится искать вдохновение в этой статье: https://tympanus.net/Development/SelectInspiration/index.html
Как только вы решите использовать нестандартное решение, всегда полезно реализовать хотя бы базовую поддержку Screen Reader.Хорошее место для начала: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/listbox_role#Best_practices
Из моего опыта работы в бизнес-проектах я обычно предпочитаю использовать решения на базе JS, особенно в тех, где внешний интерфейс сильно меняется.Мой любимый здесь: https://select2.org/, который легко настраивается и достаточно мощный, чтобы отвечать даже самым сложным требованиям, и вы не можете забыть о действительно хороших документах.
Как я вижу, вы включенытэгactjs в вашем вопросе, поэтому, если вы планируете создать решение реагирования, я бы выбрал: http://jedwatson.github.io/react-select/
, который по функциональности довольно похож на Select2