CSS классы и селекторы

Стилизация интерфейса Tom Select строится вокруг набора предсказуемых CSS-классов, которые отражают внутреннюю структуру компонента: контейнер, поле ввода, выпадающий список, элементы выбора, состояния взаимодействия. Архитектура классов ориентирована на возможность полной замены внешнего вида без изменения логики работы.

Базовая модель состоит из трёх ключевых уровней:

  • обёртка компонента (wrapper)
  • зона управления вводом (control)
  • выпадающий список (dropdown)

Каждый уровень имеет собственные классы состояния и вложенные элементы.

Базовые классы контейнера

Основной элемент, создаваемый библиотекой, получает класс:

  • ts-wrapper

Он служит корневым узлом всей структуры. Через него выполняется управление состояниями всего компонента: фокус, блокировка, загрузка, мультивыбор.

Часто вместе с ним применяются модификаторы:

  • focus — компонент в активном состоянии
  • disabled — компонент недоступен
  • loading — выполняется асинхронная загрузка данных

Пример структуры:

<div class="ts-wrapper focus">

Контейнер обеспечивает изоляцию стилей и предотвращает конфликт с глобальными правилами страницы.

Область ввода и управления

Центральный элемент взаимодействия:

  • ts-control

Он содержит выбранные значения, поле ввода и элементы управления очисткой.

Внутренняя структура обычно включает:

  • поле ввода (input)
  • контейнер выбранных элементов (item)
  • кнопки удаления

Состояния control:

  • ts-control.focus — активное взаимодействие
  • ts-control.disabled — заблокированное состояние

Типовая структура:

<div class="ts-control">
  <div class="item">Значение</div>
  <input type="text">
</div>

Элементы выбранных значений

При мультивыборе каждый выбранный элемент получает класс:

  • item

Дополнительные состояния:

  • active — элемент выделен
  • disabled — элемент нельзя удалить
  • create — созданный вручную тег (в режиме создания новых значений)

Типовая структура:

<div class="item active">
  JavaScript
  <span class="remove">×</span>
</div>

Класс item является ключевой точкой кастомизации тегов, особенно при построении интерфейсов с чипами или метками.

Поле ввода

Поле ввода внутри control не имеет отдельного уникального класса по умолчанию, но часто стилизуется через вложенность:

  • .ts-control input

Особенности поведения:

  • автоматически скрывается при отсутствии фокуса в некоторых режимах
  • расширяется при вводе текста
  • может быть отключено при одиночном выборе после выбора значения

Выпадающий список

Контейнер списка вариантов:

  • ts-dropdown

Он располагается отдельно от control и обычно позиционируется абсолютно.

Содержит два ключевых блока:

  • dropdown-content
  • список опций

Состояния:

  • active — список открыт
  • hidden — список скрыт

Пример:

<div class="ts-dropdown active">

Элементы опций

Каждый вариант в списке имеет класс:

  • option

Состояния опций:

  • active — наведение или клавиатурный фокус
  • selected — уже выбранное значение
  • disabled — недоступная опция

Пример:

<div class="option selected active">
  TypeScript
</div>

Стилизация опций определяет поведение всей системы автодополнения и навигации.

Состояния взаимодействия

Фокус

Фокусировка компонента управляется через:

  • focus на ts-wrapper

Используется для:

  • подсветки рамки
  • отображения dropdown
  • изменения поведения input

Заблокированное состояние

Класс:

  • disabled

Применяется к wrapper и control одновременно.

Эффекты:

  • отключение ввода
  • подавление кликов
  • визуальное затемнение

Загрузка данных

Класс:

  • loading

Используется при асинхронной подгрузке опций.

Типичные эффекты:

  • индикатор загрузки
  • блокировка взаимодействия
  • временное отключение фильтрации

Поисковая строка и фильтрация

В режиме поиска ввод пользователя влияет на:

  • отображение option
  • фильтрацию списка
  • подсветку совпадений

Часто используется класс:

  • no-results — отсутствие совпадений

Пример структуры:

<div class="no-results">
  Ничего не найдено
</div>

Управление отображением элементов

Скрытие и показ

Основные классы:

  • hidden — элемент скрыт
  • show — элемент отображается (в некоторых конфигурациях)

Переполнение и прокрутка

Dropdown может получать стили:

  • ограничение высоты
  • overflow-y: auto
  • кастомный скроллбар

CSS-классы напрямую не всегда участвуют, но структура ts-dropdown позволяет точно контролировать поведение списка.

Кастомизация через переопределение классов

Стилизация Tom Select часто строится через переопределение стандартных классов:

  • .ts-wrapper
  • .ts-control
  • .ts-dropdown
  • .option
  • .item

Подходы:

Полное переопределение темы

Используется сброс стандартных стилей и создание новой визуальной системы:

.ts-wrapper {
  border: none;
  background: transparent;
}

Изменение отдельных состояний

Фокус:

.ts-wrapper.focus .ts-control {
  border-color: #4a90e2;
}

Выбор:

.option.selected {
  background: #eef5ff;
}

Вложенность и приоритет селекторов

Структура компонентов предполагает высокую вложенность, поэтому используются специфичные селекторы:

  • .ts-wrapper .ts-control input
  • .ts-dropdown .option.active
  • .ts-wrapper.disabled .item

Правильное использование специфичности критично для предотвращения конфликтов с глобальными стилями UI-библиотек.

Темизация через классы состояния

Механизм состояний позволяет строить темы без изменения JavaScript-логики:

  • светлая тема
  • тёмная тема
  • компактный режим
  • режим с крупными элементами

Пример:

.ts-wrapper.compact .ts-control {
  min-height: 28px;
}

Интеграция с UI-фреймворками

CSS-классы Tom Select часто адаптируются под:

  • Tailwind через обёртки
  • Bootstrap через переопределение .form-control
  • кастомные дизайн-системы

Основная стратегия — не менять HTML, а переопределять классы через CSS-слои.

Работа с динамическими состояниями

Компонент активно изменяет классы в runtime:

  • добавление focus при клике
  • переключение active у опций
  • обновление selected
  • установка loading при запросах

Это делает CSS не статичным, а реактивным слоем интерфейса, зависящим от состояния данных и взаимодействий пользователя.

Приоритет селекторов при конфликте стилей

При работе с большими проектами часто возникают конфликты, решаемые через:

  • повышение специфичности .ts-wrapper.ts-wrapper
  • использование вложенных селекторов
  • ограничение глобальных reset-стилей
  • применение :not() для исключений

Пример:

.form .ts-wrapper:not(.disabled) .ts-control {
  cursor: text;
}

Поведение при множественных инстансах

При использовании нескольких селекторов на странице каждый экземпляр полностью изолирован через ts-wrapper. Это позволяет:

  • применять разные темы на одной странице
  • использовать различные конфигурации стилей
  • комбинировать режимы single/multiple без конфликтов CSS

Расширение через дополнительные классы

Помимо стандартных классов, часто добавляются пользовательские:

  • is-small
  • is-large
  • has-error
  • is-success

Они накладываются поверх базовой структуры Tom Select и позволяют интегрировать компонент в системы валидации форм и дизайн-токены.

Оглавление