Кастомный Select на CSS и JS. Custom HTML Select.

Всем привет. В данном видео я покажу вам как сделать свой кастомный Select на CSS и Javascript

Плейлисты моего канала, которые также могут быть вам интересны

Не ограничивай себя видеоуроками на YouTube!
Узнавайте еще больше полезной информации!

-----------------------------------------------------------------------------------

Не забываем, что самый лучший способ сказать "спасибо" - нажать кнопку "нравится" и скинуть ссылку на урок друзьям. Ничто другое так сильно не мотивирует автора продолжать работу :)

[marinakoltsova]

Відео супер! Одне задоволення вчитись по таким відео. Все просто та зрозуміло!

[ssr.]

Спасибо большое! Всё чётко и понятно, без воды!!!

[kirillbaryba]

Спасибо за видео, неплохо сюда добавить закрытие селекта при аут клике

[dariaatom]

Добрый день! Подскажите, как сделать, чтобы список закрывался при нажатии вне селекта?

[bapydev]

Еще тут не решена проблема направления раскрытия меню select что бы он не выходил за пределы экрана

например во вьюпорте если он находится снизу экрана в условной модалке начнет прыгать верстка

[TheSkiveee]

Хороший урок, но было бы интересно увидеть как его объединить с обычным select'om. То есть чтобы создавая обычный select генерировался кастомный и взаимодействовал с ним. Знаю есть куча библиотек, которые это делают, но было бы интересно узнать как написать свой скрипт)

[keba.]

Анатолий ваши уроки крутые. Но есть одно но, вы пишите на WebStorm. Было бы круто если, бы вы перешли на VSCode. Потому что большинство пишут именно на нем. Этот редактор понятнее и удобнее по моему личному мнению. Но если вам так нравиться WebStorm то тоже норм!

[SuperWolchara]

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

[pavelpavlov]

Здравствуйте. Подскажите, почему у меня в дефолтном состоянии селект всегда раскрыт?

[MrLutor]

как потом данные отправить по submit? получится создать невидимый инпут и его value присвоить innerText для current?

[kv]

Классно только потом ариа-роли и атрибуты пол дня прописывать придеться 🙂

[MrGalyano]

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

[oleg_kishinskii]

поему let select, а не const select? ведь внутри select лежит функция, которая меняться не будет?

[evgeniyprowork]

результат выбора айтема можно сохранить в local storage чтобы после обновления страницы сохранялся результат, ну и заодно кнопку дописать чтобы был сброс

[Андрей-йця]

А как у этого селектора с доступностью? ;)

[denissaleksejenko]

Ну это не кастомный селект, это пародия на селект. tabindex не будет отрабатывать, в form собираться данные оттуда тоже не будут как в нормальном селекте. Было бы правильнее привязаться к невидимому селекту, но увы. А так же в обычном селекте работает навигация, как то очень халтурно вы сделали это

[andromella_me]

Почему то у меня функция selectChoose не работает ??? Можете помочь...

[artemsdobnikov]

Сделайте вторую часть, где кастомный селект будет доступен с клавиатуры
Цены не было бы Вам)

[KrZn]

Спасибо за ролик! А подскажи пожалуйста, как сделать так, чтобы ты кликнул на элемент - это элемент выбрался по умолчанию и при следующем клике он как-то выделялся, например текст выбранного элемента по умолчанию был полужирный или с каким-нибудь hover эффектом?

[alleniverson]

Удобен ли этот селекта в дальнейшем для бек разработчиков? или при натяжке на WP?