@woebegone

Как правильно кастомизировать select списки для формы?

Посоветуйте пожалуйста плагины для кастомного оформления select выпадающих списков.
Я использую bootstrap и стандартное оформление ну прям совсем унылое. Хочется красиво оформить select и не просто список но и с multiple функционалом. Bootstrap.select.js не подходит так как он слишком огромный и в нем 95% кода не будут использоваться. Нужен простой и небольшой скрипт или как-то средствами css это можно сделать.
Спасибо!
  • Вопрос задан
  • 59 просмотров
Пригласить эксперта
Ответы на вопрос 2
@Lukmann
а самому сделать?
<select name="" id="reservation-select">
								<option class="reservation-option _reqSelect" value=""></option>
							</select>
							<div class="custom-select">
								<p class="custom__select__title">
									Выберите количество
								</p>
								<i class="fal fa-angle-up"></i>
								<div class="dropdown-select">
									<div class="dropdown-item">1</div>
									<div class="dropdown-item">2</div>
									<div class="dropdown-item">3</div>
									<div class="dropdown-item">4+</div>
								</div>
							</div>
js код
let option = document.querySelector('.reservation-option');
let customSelect = document.querySelector('.custom-select');
let customSelectTitle = document.querySelector('.custom__select__title');
let dropdownSelect = document.querySelector('.dropdown-select');
let selectItem = document.querySelectorAll('.dropdown-item');
customSelect.onclick = function(){
	dropdownSelect.classList.toggle('active');
	for(let i = 0;i<selectItem.length;i++){
		selectItem[i].onclick = function(){
			for(let i = 0;i<selectItem.length;i++){
				selectItem[i].classList.remove('active');
			}
			selectItem[i].classList.add('active');
			option.value = selectItem[i].innerHTML;
			customSelectTitle.innerHTML = selectItem[i].innerHTML;
		}
	}
}

например я вот так делал
Ответ написан
@polxz
https://habr.com/ru/post/312532/ можете почитать статью, может там ответ на ваш вопрос
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы