Кастомизируем select на чистом css

[@HawkeyePierce89]

Грустно это всё, на самом деле. Что вроде бы фронтенд весь такой идёт вперёд семимильными шагами в светлое (не факт, но допустим) будущее, а такая давно нужная и необходимая штука, как стилизация нативного селекта до сих пор всеми игнорируется и никто ничего не думает по этому поводу из тех, кто отвечает за разработку веб-стандартов.

И приходится делать вот такие, если уж говорить прямо, костыли. Нет, подход интересный, но только на поиграться, потому что такую штуку использовать как замену нативного select нельзя.

[@delphinpro]

Такое решение может пригодится разве что для списков с небольшим количеством опций выбора. Две-три, максимум пять. Длинные списки будут сильно уступать нативным в удобстве использования на мобильных телефонах.

[@artalar]

Спасибо!
Может быть опубликуете тут? Было бы удобно:

[@Zibx]

Что было бы там удобно? Как вообще этим пользоваться?

[@artalar]

Отдельно код, отдельно комментарии, при этом все удобно связанно: (наведите мышкой на выделенные слова).

Внизу главного лендинга есть видео как это делать. Что там может быть не понятно?

[@Zibx]

Не понятно кому от этого станет удобно. В статье уже есть и код и интерактивный пример с которым можно дополнительно поиграть.

[@artalar]

Код с большим количеством комментариев сложнее читать, формат `комментарии — линк — код` мне кажется удобнее и вкратчивее.

[@sfi0zy]

Клавиатура не поддерживается, читалка бесится. Делать такие штуки интересно конечно, но если мы говорим о практическом использовании — не стоит забывать о пользователях. Они бывают разными и ваш селект для некоторых из них будет совсем недоступен. Так что стоит рассматривать это как упражнение, не более.

P.S.: Демки с codepen можно вставлять прямо в статью.

[@JustDont]

Вот да. Если у вас решение «на чистом цсс», но там всё равно нифига не работает (клавиатура, читалка, да вообще просто если список будет длинный, то всё умрёт) — то такие штуки в целом бессмысленны. Тут уже надо брать JS и делать полную имитацию нативного селекта с поддержкой всего, в них по крайней мере есть практический смысл (да и море уже готовых 3rd-party реализаций).

[@artalar]

А, разве, проставить специальные атрибуты будет не достаточно?

[@ThisMan]

Нативный селект умеет правильно позиционировать выпадашку, в зависимости от того хватает для нее места или нет. Тут так не получится, и да, для одного селекта столько кода? Нет уж спасибо, где мой старый добрый js?

[@monochromer]

Чем данный способ не устраивает?