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

Question

[woebegone]

Посоветуйте пожалуйста плагины для кастомного оформления select выпадающих списков.
Я использую bootstrap и стандартное оформление ну прям совсем унылое. Хочется красиво оформить select и не просто список но и с multiple функционалом. Bootstrap.select.js не подходит так как он слишком огромный и в нем 95% кода не будут использоваться. Нужен простой и небольшой скрипт или как-то средствами css это можно сделать.
Спасибо!

Answer 1

[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;
		}
	}
}

например я вот так делал

Comments

[woebegone]

Что-то не работает.

[Lukmann]

woebegone, а стили кто будет писать?

[woebegone]

Lukmann, да и к тому-же multiple не работает

[Lukmann]

woebegone,

.reservationForm{
	width: 100%;
}
.form__holder{
	width: 100%;
	display: grid;
	grid-template-columns: 48% 48%;
	justify-content: space-between;
	grid-row-gap: 12px;
	margin: 35px 0;
}
.form__item{
	display: flex;
	flex-direction: column;
	width: 100%;
	align-items: flex-start;
}
.item-form{
	height: 52px;
	width: 100%;
	outline: none;
	border: 1px solid rgba(0, 0, 0, 0.1);
	color: black;
	font-size: calc(15px + 3 * ((100vw - 320px) / (1280 - 320)));
	padding: 0.375rem 0.75rem;
	font-family: 'Poppins', sans-serif;
}
.form__title{
	font-size: calc(15px + 3 * ((100vw - 320px) / (1280 - 320)));
	color: black;
	font-weight: 600;
	margin-bottom: 10px;
}
.item-form::placeholder{
	font-family: 'Poppins', sans-serif;
	color: #666;
	font-size: calc(13px + 2 * ((100vw - 320px) / (1280 - 320)));
}
#reservation-select{
	display: none;
}
.custom-select{
	height: 52px;
	width: 100%;
	outline: none;
	border: 1px solid rgba(0, 0, 0, 0.1);
	color: black;
	font-size: calc(15px + 3 * ((100vw - 320px) / (1280 - 320)));
	padding: 0.375rem 0.75rem;
	font-weight: 500;
	display: flex;
	align-items: center;
	justify-content: space-between;
	position: relative;
	cursor: pointer;
}
.custom-select.empty{
	border-color: red;
}
.custom__select__title{
	font-size: inherit;
	font-weight: inherit;
	color: inherit;
}
.custom-select i{
	transform: rotate(180deg);
	font-size: 20px;
}
.dropdown-select{
	position: absolute;
	left: 0;
	top: 100%;
	width: 100%;
	border: 1px solid black;
	transform: translateY(40px);
	transition: 0.3s ease;
	opacity: 0;
	visibility: hidden;
}
.dropdown-select.active{
	opacity: 1;
	transform: translateY(0);
	visibility: visible;
}
.dropdown-item{
	width: 100%;
	background: white;
	padding: 0.375rem 0.75rem;
}
.dropdown-item:hover{
	background: black;
	color: white;
}
.dropdown-item.active{
	background: black;
	color: white;
}
.reservation-button{
	margin: 0 auto;
	display: flex;
	justify-content: center;
	align-items: center;
	background: #c8a97e;
	padding: 12px 20px;
	border: 1px solid #c8a97e;
	outline: none;
	font-family: 'Poppins', sans-serif;
	font-size: calc(13px + 3 * ((100vw - 320px) / (1280 - 320)));
	color: white;
	font-weight: 400;
	transition: 0.3s ease;
	cursor: pointer;
}
.reservation-button:hover{
	background: transparent;
	color: #c8a97e;
}
.reservationForm ._req.empty{
	border-color: red;
}

[woebegone]

Lukmann, А как multiple наладить?

[Lukmann]

woebegone, не знаю,не делал

Answer 2

[polxz]

https://habr.com/ru/post/312532/ можете почитать статью, может там ответ на ваш вопрос