Пишем свой select дропдаун на JS. Подробный урок

↓↓↓ Материалы в описании под видео ↓↓↓

В этом уроке мы напишем свой select на HTML, CSS, JS и полностью стилизуем его. Напишем логику на JS, добавим JS полифил поддержку IE 10 и 11. Урок по верстке и JavaScript.

Урок по простой стилизации select на CSS:

Can I use:

Nodelist forEach polyfill:

::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::

💻 Бесплатный курс "Создай свой первый сайт на HTML5 и CSS3"
От установки редактора, до публикации в сети.

::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
Обучение с наставником, 3 месяца, результат, гарантия.
Научим создавать веб-сайты и зарабатывать на этом.
Старт обучения: 05 Августа 2024 года.

Обучение с наставником, 3 месяца, результат, гарантия.
Старт обучения: 12 Августа 2024 года.

💻 Курс "Разработка сайтов на PHP + MySQL":
Создание сайтов с системой управления.
Присоединиться к курсу можно прямо сейчас.

🏁 Обучение с нуля
💁‍♂️ Обучение с наставником
🎯 Доведение с нуля до результата
🏢 Помощь с трудоустройством
💵 Поможем взять первый заказ на фрилансе

💳 возможна рассрочка
💳 если курс не понравится, вернём деньги в первую неделю
::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::

[autlady]

Спасибо большое, как раз впервые столкнулась в проекте с такими селектами и это видео мне очень помогло ❤

[Max-edyd]

С большим удовольствием посмотрел, взял результат как готовое решение, надо срочно, но для практики по уроку реализую самостоятельно, спасибо Юрий!

[andreynasuto]

Суперподробно и понятно, спасибо огромное!

[enccjgc]

Замечательно видео! Всё в нем есть! Больше нигде ничего не надо искать! Спасибо! И слушать очень приятно))

[Anatoli-bqpe]

Как всегда, все четко и по делу. Благодарю!

[ibragimdodov]

Отличная подача материала, спасибо за Ваш труд! Всё оч круто!

[nikomunikabelen]

Отличный урок! Как всегда все максимально подробно. Спасибо!

[alexdiz]

шикарные подробные объяснения! идеальный формат👍

[teovosg]

Отличное и полезное видео, спасибо за труд.

[Sergey_Klimov]

Опять задета тема кроссбраузерности) Я смотрел Ваш урок по верстке тестового задания для HTML-верстальщика и оттуда знаю, что forEach не поддерживается експлорером.
Жаль что нельзя два лайка поставить)

[uk-lych_sveta]

Дружище ты крут, все четко и понятно, особенно когда объяснял JS, только у тебя понял как оно работает, спасибо за отличный контент.

[niceman]

Спасибо большое! На эту тему мало видео и руководств

[ea]

Классное видео и беспомощные option. Четкое объяснение что нужно делать, особенного когда делали js. В эти моменты останавливал видео и пробовал делать сам. Моментов мелких конечно, чтобы просто такой селект сделать - куча. Классно было бы ещё, если вы показали, как удалять обработчики и взаимодействовать со списком с помощью клавиатуры ( доступность) - стрелочками там переключаться и enter-ом выбирать значения. Спасибо за урок. Продолжайте в том же духе 👍

[qmcweov]

спасибо за информацию!!!колокол включил!!лайк поставил!

[victoria-sv]

Спасибо, очень доступно объяснили все!)

[zeumqgc]

Спасибо вам огромное!!!
На столько познавательно, увлекательно и главное доступно, без запутанных шагов для новичка, с объяснением каждого действия. Очень сильно помогли в учебе!
Слава всемирной паутине) Слава Утьюбу) Ведь они увековечат ВАС и ваши знания!

[Sergey_Klimov]

Только сегодня смотрел на одном сайте зачем же они селекты делают баттоном и вот, Вы показываете тоже самое))
Лайк)

[kubris.developer]

Спасибо, Роман. Если бы рассказали, как реализовать переход Tab-ом на выпадающий список после его открытия и сделали бы переворачивание стрелок - вообще инструкция была бы идеальной!

[beccobu]

Отлично. Вот только есть то, что упущено почти во всех кастомных реализациях селекта - в какую сторону раскрывать список (верх/низ), какой высоты и с прокруткой или без.

[marik]

Добрый вечер. Очень хорошие уроки. Есть у вас курс по Js? Когда следующее видео выйдет?