Всем привет! Нашел код для стилизации select и option. Но он работает только для одного select. Кто может подсказать почему? Спасибо.
const selectSingle = document.querySelector('.__select');
const selectSingle_title = selectSingle.querySelector('.__select__title');
const selectSingle_labels = selectSingle.querySelectorAll('.__select__label');
// Toggle menu
selectSingle_title.addEventListener('click', () => {
if ('active' === selectSingle.getAttribute('data-state')) {
selectSingle.setAttribute('data-state', '');
} else {
selectSingle.setAttribute('data-state', 'active');
}
});
// Close when click to option
for (let i = 0; i < selectSingle_labels.length; i++) {
selectSingle_labels[i].addEventListener('click', (evt) => {
selectSingle_title.textContent = evt.target.textContent;
selectSingle.setAttribute('data-state', '');
});
}
// Reset title
const reset = document.querySelector('.reset');
reset.addEventListener('click', () => {
selectSingle_title.textContent = selectSingle_title.getAttribute('data-default');
});
.__select {
position: relative;
width: 160px;
&:last-child {
width: 120px;
}
&[data-state="active"] {
.__select__title {
&::before {
transform: translate(-3px, -50%) rotate(-45deg);
}
&::after {
transform: translate(3px, -50%) rotate(45deg);
}
}
.__select__content {
opacity: 1;
}
.__select__label+.__select__input+.__select__label {
max-height: 40px;
border-top-width: 1px;
}
}
}
<div class="__select mr-2 mb-2" data-state="">
<div class="__select__title" data-default="Option 0">Name</div>
<div class="__select__content">
<input id="singleSelect00" class="__select__input" type="radio" name="singleSelect" />
<label for="singleSelect00" class="__select__label">Name</label>
<input id="singleSelect00" class="__select__input" type="radio" name="singleSelect" />
<label for="singleSelect00" class="__select__label">Name</label>
<input id="singleSelect11" class="__select__input" type="radio" name="singleSelect" />
<label for="singleSelect11" class="__select__label">Name</label>
</div>
</div>