Встречается на собеседованиях • сегодня
Как настраивал кастомный select
Для кастомного `select` обычно скрывают нативный элемент и создают стилизованную обёртку. Вот базовый подход:
1. **HTML**:
```html
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.
Софи собрала все вопросы. Тренируйся и получай
офферы быстрее!
офферы быстрее!
Попробовать бесплатно
Следующий вопрос
Это единственный вопрос по вашему фильтру
как отвечать на вопрос
пример собеседования
фреймворки на собеседовании
типичные вопросы junior
интервью вопросы и ответы