n1ghtman199 Mar 7 2019 at 10:07

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

4 min

96K

Entertaining tasksCSS*Delirium codingHTML*

From sandbox

+10

Comments 12

HawkeyePierce89 Mar 7 2019 at 10:55

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

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

delphinpro Mar 7 2019 at 11:21

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

artalar Mar 7 2019 at 11:23

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

-2

Zibx Mar 7 2019 at 11:38

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

artalar Mar 7 2019 at 11:47

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

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

Zibx Mar 7 2019 at 14:02

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

artalar Mar 7 2019 at 14:05

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

-1

sfi0zy Mar 7 2019 at 11:34

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

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

JustDont Mar 7 2019 at 12:52

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

artalar Mar 7 2019 at 13:24

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

ThisMan Mar 7 2019 at 13:47

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

monochromer Mar 11 2019 at 20:48

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

Show the best of all time