Те из верстальщиков кто часто клепает формы регистрации или обратной связи обязательно столкнутся с задачей по выводу множественного выбора результатов - multiselect. К сожалению, не все элементы тега <select> все ещё можно из коробки стилизовать по желанию дизайнера.  В этом маленьком уроке я хотел бы поделиться своим опытом решения данной проблемы на базе знания CSS и немного ванильного JS.  Если дизайнер вам нарисовал красивый <select> на 10-15 возможных вариантов выбора  вы скорее всего придете к решению взять первую попавшуюся, похожую на дизайн, библиотеку из гугла (на что я надеялся).  Личная боль в этом вопросе была связана с тем что в проекте нельзя было использовать сторонних библиотек, например jQuery, что очень сократило количество предложенных вариантов.   Ну что ж приступим к написания простого множественного выбора для формы: Есть заголовок секции, есть возможность выбора опций, есть <select>  с атрибутом multiple который дает возможность сделать выбор нескольких элементов одновременно, и конечно же есть поле error_text куда мы будем сбрасывать текст об ошибке если этот мультиселект будет обязательным к заполнению *Для меня было открытием что мультивыбор происходит посредством зажатия клавиши Ctrl или Shift и указанием тех элементов которые надо отправить на сервер. Видать невнимательно в свое время читал документацию.  Вроде как работает, но выглядит не очень. Да и мультиселектность, как-то не очевидна.... что же давайте улучшим. Добавим немного стилей, что б не было так страшно  Теперь на него хоть приятно нажимать. SVG иконки я загнал в CSS, но это не оптимально, и лучше держать их подключаемыми файлами.  Для взаимодействия с <select>  Я добавил <label class="multiselect_label">  и <input type="checkbox" class="multiselect_checkbox"> Тут есть немного магии которая связана с перекрытием слоев через z-index и взаимодействие с элементами через css псевдокласс :checked. С введением этих новых элементов мы можем стилизовать подсказки и дать понять пользователю что он выбрал.  Это обеспечит лучшие взаимодействие с элементом. Расширим ещё немного функционал добавив кнопки отображения выбранных пунктов.   Теперь при выборе <option> в дополнительном элементе мы будем создавать кнопку, которая наглядно покажет что за элементы были выбраны пользователем. С возможностью их удалить.   Так же, поскольку я уверен, что не только я не знал что <select> использует для выбора зажатый Ctrl или Shift Добавим эту подсказку отдельно. Можно б было засунуть в тултип (например вывод через data атрибут), но я подумал о доступности и возможности перевода этой подсказки на другие языки.  Вот что получилось сделать. Для наглядности добавил сразу несколько элементов, что б было понимание что это можно масштабировать, просто добавляя нужные id и связанные с ними <label> Также отделил комментариями нужные элементы что б вы могли применить этот код в своих проектах для удобства. Он не идеален с точки зрения доступности, но уж лучше так, чем нативный или библиотека под jQuery. Прелесть тега <select>  в том что для смартфонов, движки сами покажут мультивыбор при фокусе на теге, и вам не понадобиться думать как впихнуть 15-20 пунктов что б верстка не сломалась. Надеюсь кому-то это  будет полезным. Увлеченный сайтодел