Кастомный select на Css и javascript: как создать выпадающий список вручную

Введение в создание кастомного select

Классический HTML-элемент ``, мы создадим контейнер с классом, в который поместим текущую выбранную опцию и список всех доступных значений. Пример базовой структуры:

```html

Выберите опцию

Опция 1

Опция 2

Опция 3

```

Такой подход позволяет нам полностью контролировать внешний вид и поведение элемента, что невозможно при использовании стандартного тега `` напрямую — они не поддаются полной стилизации. Это основная причина, почему стилизация делается вручную.

---

Этап 3: Добавление логики на JavaScript

Обработка кликов и выбора

Теперь нам нужно реализовать поведение выпадающего списка. Здесь на помощь приходит создание select на JavaScript. Основная задача — открыть список по клику и обновить выбранное значение при выборе опции.

```javascript
document.querySelectorAll('.custom-select').forEach(select => {
const selected = select.querySelector('.select-selected');
const items = select.querySelector('.select-items');

selected.addEventListener('click', () => {
items.classList.toggle('select-hide');
selected.classList.toggle('active');
});

items.querySelectorAll('div').forEach(option => {
option.addEventListener('click', () => {
selected.textContent = option.textContent;
items.classList.add('select-hide');
selected.classList.remove('active');
});
});
});
```

Также следует добавить обработку кликов вне компонента, чтобы закрывать список при щелчке вне его границ. Это важная часть UX, которую часто упускают новички при реализации select без использования библиотек.

---

Частые ошибки при кастомизации select

Ошибки, которых стоит избегать

Одна из самых распространённых ошибок — попытка стилизовать стандартный `