Темы оформления

Визуальная система оформления строится поверх стандартного HTML <select> и полностью управляется набором CSS-классов, которые библиотека добавляет динамически при инициализации компонента. Основная идея заключается в разделении логики и представления: JavaScript отвечает за поведение, а внешний вид формируется через переопределяемые стили.

После инициализации исходный элемент скрывается, а вместо него создаётся структура DOM, включающая контейнер управления, поле ввода и выпадающий список. Каждый из этих элементов получает предсказуемые классы, что позволяет строить как минималистичные, так и сложные визуальные системы.

Ключевой принцип: оформление не является фиксированным, а представляет собой набор переопределяемых слоёв.

Основные CSS-классы и их роль

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

  • .ts-wrapper — корневой контейнер
  • .ts-control — область ввода и выбранных значений
  • .ts-dropdown — выпадающий список
  • .ts-option — отдельный элемент списка
  • .ts-item — выбранный элемент (tag/chip)
  • .ts-input — поле ввода внутри control

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

Пример базового переопределения:

.ts-wrapper {
  width: 100%;
}

.ts-control {
  border: 1px solid #ccc;
  padding: 8px;
  border-radius: 6px;
}

.ts-dropdown {
  border: 1px solid #ccc;
  margin-top: 4px;
  background: #fff;
}

.ts-option {
  padding: 6px 10px;
  cursor: pointer;
}

.ts-option.active {
  background: #f0f0f0;
}

Состояния элементов интерфейса

Оформление в Tom Select сильно зависит от состояния компонентов. Состояния задаются через модификаторы классов и позволяют визуально отражать поведение.

Основные состояния:

  • focus — активное взаимодействие
  • active — выделенный элемент в списке
  • selected — выбранный элемент
  • disabled — недоступное состояние
  • dropdown-open — открытый список

Пример стилизации состояний:

.ts-wrapper.focus .ts-control {
  border-color: #4a90e2;
  box-shadow: 0 0 0 2px rgba(74,144,226,0.2);
}

.ts-option.active {
  background: #e6f2ff;
}

.ts-wrapper.disabled .ts-control {
  background: #f5f5f5;
  opacity: 0.6;
  pointer-events: none;
}

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

Темизация через переопределение базовых классов

Наиболее распространённый подход к кастомизации заключается в полном переопределении стандартных классов. Такой подход не требует изменения JavaScript-логики и позволяет интегрировать компонент в любой дизайн-системный контур.

Пример темной темы:

.ts-wrapper {
  font-family: sans-serif;
}

.ts-control {
  background: #1e1e1e;
  border: 1px solid #333;
  color: #f1f1f1;
}

.ts-dropdown {
  background: #2a2a2a;
  border: 1px solid #333;
}

.ts-option {
  color: #ddd;
}

.ts-option.active {
  background: #3a3a3a;
}

.ts-item {
  background: #444;
  color: #fff;
  border-radius: 4px;
  padding: 2px 6px;
}

Такой подход обеспечивает консистентность интерфейса без изменения поведения компонента.

Работа с тегами и чипами

Многоуровневое оформление появляется при использовании режима множественного выбора. В этом случае каждый выбранный элемент отображается как отдельный визуальный блок.

Эти блоки формируются через класс .ts-item и могут содержать кнопки удаления, текст и дополнительные индикаторы.

Пример стилизации тегов:

.ts-item {
  display: inline-flex;
  align-items: center;
  background: #e8e8e8;
  padding: 2px 8px;
  margin: 2px;
  border-radius: 12px;
  font-size: 12px;
}

.ts-item .remove {
  margin-left: 6px;
  cursor: pointer;
  opacity: 0.6;
}

.ts-item .remove:hover {
  opacity: 1;
}

Поведение удаления и взаимодействия не зависит от оформления, что позволяет менять внешний вид без риска сломать логику.

Интеграция с дизайн-системами

Tom Select легко интегрируется с популярными дизайн-системами за счёт полной управляемости CSS.

Bootstrap-подобная стилизация

.ts-control {
  border-radius: 0.375rem;
  border: 1px solid #ced4da;
  padding: 0.375rem 0.75rem;
}

.ts-dropdown {
  border-radius: 0.375rem;
  box-shadow: 0 0.5rem 1rem rgba(0,0,0,0.15);
}

.ts-option:hover {
  background: #f8f9fa;
}

Минималистичный стиль

.ts-control {
  border: none;
  border-bottom: 1px solid #aaa;
  border-radius: 0;
  padding: 6px 0;
}

.ts-dropdown {
  border: none;
  box-shadow: none;
}

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

Переопределение через CSS-переменные

В некоторых сборках и кастомных реализациях используется подход с CSS variables, позволяющий централизованно управлять стилями.

:root {
  --ts-border: #ccc;
  --ts-bg: #fff;
  --ts-text: #222;
  --ts-hover: #f2f2f2;
}

.ts-control {
  border: 1px solid var(--ts-border);
  background: var(--ts-bg);
  color: var(--ts-text);
}

.ts-option:hover {
  background: var(--ts-hover);
}

Такой способ особенно эффективен при динамическом переключении тем.

Управление шириной, высотой и поведением контейнера

Оформление включает не только цвета и отступы, но и геометрию компонента. Контейнер .ts-wrapper часто используется как точка управления размерами.

.ts-wrapper {
  width: 320px;
}

.ts-control {
  min-height: 38px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}

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

Стилизация выпадающего списка

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

.ts-dropdown {
  max-height: 240px;
  overflow-y: auto;
  z-index: 1000;
}

.ts-dropdown .ts-option {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

Дополнительные визуальные улучшения часто включают тени и сглаживание краёв:

.ts-dropdown {
  box-shadow: 0 6px 20px rgba(0,0,0,0.12);
  border-radius: 6px;
}

Приоритеты переопределения и каскадность

Система оформления в Tom Select чувствительна к порядку загрузки стилей. Базовые стили библиотеки должны загружаться до пользовательских, иначе переопределения могут не примениться.

Правильная структура подключения:

<link rel="stylesheet" href="tom-select.css">
<link rel="stylesheet" href="custom-theme.css">

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

.ts-wrapper .ts-control {
  border-color: #999;
}

Стилизация через модификацию классов контейнера

Распространённый подход — добавление пользовательских классов к корневому элементу для создания тематических вариаций.

new TomSelect("#select", {
  controlInput: null,
  onInitialize() {
    this.wrapper.classList.add("theme-dark");
  }
});
.theme-dark .ts-control {
  background: #111;
  color: #eee;
}

.theme-dark .ts-dropdown {
  background: #1a1a1a;
}

Этот метод позволяет изолировать темы без конфликтов между стилями.

Адаптивное оформление

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

@media (max-width: 600px) {
  .ts-wrapper {
    width: 100%;
  }

  .ts-dropdown {
    max-height: 180px;
  }
}

Адаптивность напрямую влияет на удобство работы с компонентом в условиях ограниченного пространства.

Ограничения и особенности кастомизации

Глубокая кастомизация требует учета того, что часть классов создаётся динамически. Это означает:

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

Тем не менее архитектура Tom Select изначально ориентирована на расширяемость, что делает систему оформления предсказуемой при грамотной организации стилей

Оглавление