Стилизация выделенных элементов

В интерфейсе автодополнения библиотеки Awesomplete ключевую роль играет визуальное обозначение активного элемента списка. Активный элемент — это строка, на которую в данный момент указывает клавиатурная навигация (стрелки вверх/вниз) или мышь. Его стилизация напрямую влияет на удобство выбора и восприятие подсказок.

В разметке выпадающего списка каждый элемент обычно представлен тегом <li>, а текущее состояние выделения фиксируется через атрибут aria-selected="true". Именно этот атрибут является основным селектором для стилизации активного пункта.

.awesomplete ul li[aria-selected="true"] {
    background: #2d7ff9;
    color: #ffffff;
}

Такой подход предпочтительнее классовой модели, поскольку состояние синхронизируется с логикой доступности (ARIA), а не с декоративными классами.

Базовые селекторы списка и элементов

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

  • контейнер .awesomplete
  • список ul
  • элементы li

Каждый уровень может быть переопределён отдельно, но именно li определяет визуальное поведение вариантов.

.awesomplete {
    position: relative;
}

.awesomplete ul {
    list-style: none;
    margin: 0;
    padding: 0;
    background: #fff;
    border: 1px solid #ddd;
    max-height: 240px;
    overflow-y: auto;
}

Эти стили создают базовую оболочку, внутри которой уже работает логика выделения.

Стилизация активного элемента через aria-selected

Состояние активного пункта меняется динамически при навигации. В библиотеке Awesomplete оно отражается следующим образом:

  • текущий элемент получает aria-selected="true"
  • остальные элементы получают false или не содержат атрибута
  • только один элемент может быть активным

Стилизация через атрибут позволяет избежать конфликтов с hover-состояниями:

.awesomplete ul li[aria-selected="true"] {
    background-color: #1e90ff;
    color: #fff;
}

Дополнительно можно усилить визуальный эффект:

.awesomplete ul li[aria-selected="true"] {
    background-color: #1e90ff;
    color: #fff;
    box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.2);
    transform: scale(1.01);
}

Использование transform и box-shadow помогает отделить активный элемент от остальных без перегрузки интерфейса.

Hover-состояние и его взаимодействие с выделением

Помимо клавиатурной навигации, элементы списка реагируют на наведение мыши. Обычно используется псевдокласс :hover, но он не должен конфликтовать с aria-selected.

.awesomplete ul li:hover {
    background: #f0f6ff;
}

Однако при активном элементе hover не должен перебивать выделение. Поэтому добавляется приоритет:

.awesomplete ul li[aria-selected="true"],
.awesomplete ul li[aria-selected="true"]:hover {
    background: #1e90ff;
    color: #fff;
}

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

Стилизация подсветки совпадений (mark)

При вводе текста библиотека Awesomplete автоматически выделяет совпадающие части строки с помощью тега <mark>. Это позволяет визуально отделить релевантную часть подсказки от остального текста.

Базовый стиль браузера для <mark> обычно жёлтый, что не всегда подходит под дизайн интерфейса.

.awesomplete mark {
    background: transparent;
    color: inherit;
    font-weight: 600;
    text-decoration: underline;
}

Альтернативный вариант — мягкая подсветка:

.awesomplete mark {
    background: rgba(255, 235, 59, 0.3);
    color: inherit;
    padding: 0 2px;
    border-radius: 2px;
}

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

Комбинация active и highlight в одном элементе

Наиболее сложный случай возникает, когда элемент одновременно:

  • является активным (aria-selected="true")
  • содержит подсвеченное совпадение (<mark>)

В таком случае необходимо согласовать цвета:

.awesomplete ul li[aria-selected="true"] mark {
    background: rgba(255, 255, 255, 0.25);
    color: #fff;
}

Это предотвращает визуальный конфликт между фоном активного элемента и подсветкой текста.

Темная тема и адаптивная стилизация

При внедрении тёмной темы важно переработать как фон списка, так и активное состояние.

.awesomplete.dark ul {
    background: #1f1f1f;
    border-color: #333;
    color: #e5e5e5;
}

Активный элемент:

.awesomplete.dark ul li[aria-selected="true"] {
    background: #3a7bd5;
    color: #ffffff;
}

Подсветка совпадений:

.awesomplete.dark mark {
    background: rgba(255, 255, 0, 0.2);
}

Тёмная тема требует увеличенного контраста, иначе активное состояние теряется на фоне списка.

Анимация перехода активного состояния

Плавность смены выделения улучшает восприятие навигации. Однако анимации должны быть минимальными, чтобы не мешать быстрому выбору.

.awesomplete ul li {
    transition: background 0.15s ease, color 0.15s ease;
}

Дополнительно можно добавить:

.awesomplete ul li[aria-selected="true"] {
    transition: background 0.1s ease;
}

Слишком сложные анимации (например, движение или масштабирование) могут ухудшать UX при быстром скролле.

Управление конфликтами стилей

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

  • reset.css
  • UI-библиотек
  • глобальных li селекторов

Для защиты структуры используется более специфичный селектор:

input.awesomplete + ul li[aria-selected="true"] {
    background: #1e90ff;
}

Или усиление через каскад:

.awesomplete ul li[aria-selected="true"] {
    background: #1e90ff !important;
}

Использование !important нежелательно, но иногда необходимо при интеграции в чужие UI-системы.

Индикаторы фокуса и доступность

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

.awesomplete input:focus {
    outline: 2px solid #1e90ff;
    outline-offset: 2px;
}

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

Сложные визуальные темы для выделения

В интерфейсах с высокой степенью кастомизации активный элемент может включать дополнительные эффекты:

.awesomplete ul li[aria-selected="true"] {
    background: linear-gradient(90deg, #1e90ff, #5aa9ff);
    color: #fff;
    font-weight: 500;
    letter-spacing: 0.2px;
}

Такой подход используется в системах, где автодополнение является центральным элементом UX (поиск, IDE-подобные интерфейсы, фильтры данных).

Изоляция стилей компонента

Для предотвращения влияния внешних стилей часто используется изоляция:

.awesomplete ul {
    all: unset;
    display: block;
}

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

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

При стилизации выделенного элемента важно понимать порядок приоритетов:

  1. inline-стили (если используются)
  2. !important
  3. более специфичные селекторы
  4. базовые селекторы

Пример корректной структуры:

.awesomplete ul li {
    background: #fff;
}

.awesomplete ul li:hover {
    background: #f5f5f5;
}

.awesomplete ul li[aria-selected="true"] {
    background: #1e90ff;
    color: #fff;
}

Такая последовательность обеспечивает предсказуемость поведения при любой комбинации состояний.

Взаимодействие с динамическими данными

При изменении списка результатов динамически важно учитывать, что DOM-элементы пересоздаются. Это означает, что стили должны быть полностью декларативными и не зависеть от состояния JavaScript напрямую.

В библиотеке Awesomplete это реализовано через постоянное обновление aria-selected, что делает CSS единственным источником визуальной логики.

.awesomplete ul li[aria-selected="true"] {
    outline: 1px solid rgba(0,0,0,0.2);
}

Такой подход гарантирует стабильное поведение даже при частых обновлениях списка.

Оглавление