Встречается на собеседованиях • сегодня

Как настраивал кастомный select

Для кастомного `select` обычно скрывают нативный элемент и создают стилизованную обёртку. Вот базовый подход: 1. **HTML**: ```html
Option 1
Option 1
Option 2
``` 2. **CSS**: ```css .native-select { opacity: 0; position: absolute; pointer-events: none; } .custom-select { position: relative; } .custom-select__options { display: none; position: absolute; top: 100%; width: 100%; } .custom-select.open .custom-select__options { display: block; } ``` 3. **JavaScript**: ```javascript const customSelect = document.querySelector('.custom-select'); const nativeSelect = customSelect.querySelector('.native-select'); const trigger = customSelect.querySelector('.custom-select__trigger'); const options = customSelect.querySelectorAll('.custom-select__option'); trigger.addEventListener('click', () => { customSelect.classList.toggle('open'); }); options.forEach(option => { option.addEventListener('click', () => { nativeSelect.value = option.dataset.value; trigger.textContent = option.textContent; customSelect.classList.remove('open'); }); }); ``` Для сложных случаев можно использовать готовые библиотеки типа Select2 или Choices.js.
Sophi
Софи собрала все вопросы. Тренируйся и получай
офферы быстрее!
Попробовать бесплатноArrow

Следующий вопрос

Это единственный вопрос по вашему фильтру

как отвечать на вопрос
пример собеседования
фреймворки на собеседовании
типичные вопросы junior
интервью вопросы и ответы