<div class="select-input">
<div class="select__menu">
<div class="select__btn">
<div class="select__btntext">
<input type="text" name="form[]" value="" class="team-create__input-no-placeholder">
</div>
<div class="select__icon"></div>
</div>
<div class="select__options">
<ul data-simplebar class="select__body">
<li class="select__option">
<div class="select__option-text">Текст</div>
</li>
<li class="select__option">
<div class="select__option-text">Текст</div>
</li>
<li class="select__option">
<div class="select__option-text">Текст</div>
</li>
<li class="select__option">
<div class="select__option-text">
Текст
</div>
</li>
</ul>
</div>
</div>
</div>
<div class="select-input">
<div class="select__menu">
<div class="select__btn">
<div class="select__btntext">
<input type="text" name="form[]" value="" class="team-create__input-no-placeholder">
</div>
<div class="select__icon"></div>
</div>
<div class="select__options">
<ul data-simplebar class="select__body">
<li class="select__option">
<div class="select__option-text">Текст</div>
</li>
<li class="select__option">
<div class="select__option-text">Текст</div>
</li>
<li class="select__option">
<div class="select__option-text">Текст</div>
</li>
<li class="select__option">
<div class="select__option-text">
Текст
</div>
</li>
</ul>
</div>
</div>
</div>
<div class="select-input">
<div class="select__menu">
<div class="select__btn">
<div class="select__btntext">
<input type="text" name="form[]" value="" class="team-create__input-no-placeholder">
</div>
<div class="select__icon"></div>
</div>
<div class="select__options">
<ul data-simplebar class="select__body">
<li class="select__option">
<div class="select__option-text">Текст</div>
</li>
<li class="select__option">
<div class="select__option-text">Текст</div>
</li>
<li class="select__option">
<div class="select__option-text">Текст</div>
</li>
<li class="select__option">
<div class="select__option-text">
Текст
</div>
</li>
</ul>
</div>
</div>
</div>
.select-input {
position: relative;
margin: 0px 0px 50px 0px;
}
.select__menu {
width: 100%;
font-weight: 400;
font-size: 10px;
border-radius: 5px;
height: 20px;
background: #ffffff;
}
.select__menu._active {
border-radius: 5px 5px 0px 0px;
}
.select__menu._active .select__options {
display: block;
}
.select__btn {
cursor: pointer;
font-weight: 500;
font-size: 9px;
letter-spacing: 0.03em;
}
.select__btntext input {
background: #ffffff;
width: 100%;
height: 20px;
border-radius: 5px;
font-weight: 400;
font-size: 10px;
padding: 6px 20px 5px 10px;
}
.select__btntext input::input-placeholder {
display: none;
color: #162b66;
}
.select__btntext input::placeholder {
display: none;
color: #162b66;
}
.select__btntext input:input-placeholder {
display: none;
color: #162b66;
}
.select__btntext input::input-placeholder {
display: none;
color: #162b66;
}
.select__btntext input::placeholder {
display: none;
color: #162b66;
}
.select__placeholder {
opacity: 0;
}
.select__icon {
cursor: pointer;
position: absolute;
top: 5px;
right: 5px;
width: 10px;
height: 10px;
background-image: url("../img/icons/scroll-down.svg");
background-repeat: no-repeat;
background-size: 100% 100%;
}
.select__options {
outline: none;
display: none;
position: absolute;
top: 18px;
left: 0;
width: 100%;
padding: 0px 0px 4px 0px;
}
.select__body {
height: 54px;
background: #ffffff;
border-radius: 0px 0px 10px 10px;
padding: 0px 0px 5px 0px;
}
.select__option {
cursor: pointer;
font-weight: 500;
font-size: 9px;
letter-spacing: 0.03em;
padding: 2px 10px 2px 10px;
transition: all 0.3s ease 0s;
transition: all 0.3s ease 0s;
transition: all 0.3s ease 0s;
display: block;
}
.select__option::before {
content: attr(data-text);
font-size: 9px;
position: relative;
display: block;
height: 0;
visibility: hidden;
overflow: hidden;
user-select: none;
user-select: none;
user-select: none;
user-select: none;
pointer-events: none;
font-weight: 700;
}
.select__option:hover {
background: #b6dbff;
font-weight: 700;
}
.select__option-text {
display: box;
display: flexbox;
display: flex;
box-align: center;
flex-align: center;
align-items: center;
}
.select__option-text img {
width: 7px;
height: 6px;
margin: 0px 4px 0px 0px;
}
function selectTeamCreate() {
const optionMenus = document.querySelectorAll('.select__menu');
optionMenus.forEach(optionMenu => {
const selectBtn = optionMenu.querySelector('.select__btn');
const options = optionMenu.querySelectorAll('.select__option');
const selectBtntext = optionMenu.querySelector('.select__btntext');
const sBtntext = optionMenu.querySelector('.team-create__input-no-placeholder');
const sBtntextMob = optionMenu.querySelector('.team-create__input-placeholder');
const selectInput = document.querySelector('.select-input');
if (optionMenu) {
selectBtn.addEventListener("click", function (e) {
optionMenu.classList.toggle("_active")
});
options.forEach(option => {
option.addEventListener("click", function (e) {
if (e.target.classList.contains('.select__option-text') != null) {
if (selectInput) {
if (document.documentElement.clientWidth > 479.98) {
sBtntext.value = e.target.innerText;
} else {
sBtntextMob.value = e.target.innerText;
}
} else {
const selectedOption = option.querySelector('.select__option-text').innerText;
selectBtntext.innerText = selectedOption;
}
};
optionMenu.classList.remove("_active")
});
});
window.addEventListener('click', e => {
const target = e.target
if (!target.closest('.select__options') && !target.closest('.select__menu')) {
optionMenu.classList.remove("_active")
}
})
}
})
}
selectTeamCreate()
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.