Меняем цвет фона опции списка при наведении: CSS

Быстрый ответ

Желаете изменить цвет фона опций выпадающего списка при наведении? В этом случае вам придут на помощь CSS для стилизации и JavaScript для обработки событий. Важно знать, что псевдокласс :hover не всегда корректно работает с элементом <option>. Ниже приведён пример применения.

CSS:

.highlight { background-color: lightblue; } /* Выберите любой цвет по своему вкусу */

JavaScript:

const mySelect = document.getElementById('mySelect');
mySelect.addEventListener('mouseover', function(e) {
  // Данный элемент нужно выделить с помощью класса "highlight".
  if(e.target.tagName === 'OPTION') e.target.classList.add('highlight');
});
mySelect.addEventListener('mouseout', function(e) {
  // Событие завершилось, следует удалить выделение.
  if(e.target.tagName === 'OPTION') e.target.classList.remove('highlight');
});

Этот код при наведении мыши добавляет опции класс .highlight, что меняет фон на светло-голубой цвет.

Преодоление ограничений стилизации

Оформление тегов <select> и <option> может доставить проблемы при проложении одних и тех же правил стилизации на разные браузеры. Многие из них доверяют отрисовку элементов системным компонентам, что может ограничивать поддержку псевдокласса :hover для <option>.

В Firefox есть возможность стилизации через тени, но этот метод к сожалению не является универсальным.

В Chrome можно изменять только background-color для select:focus > option:checked. А при наведении курсора мыши всё становится несколько сложнее.

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

Создание пользовательского выпадающего списка на базе ul/li позволяет надёжно воспроизводить эффекты наведения, паттерны взаимодействия и доступность стандартных списков. Тут без JavaScript для контроля событий и применения стилей не обойтись.

Визуализация

Посмотрите, как интерактивная 🎨 палитра отражает реакцию каждого элемента выпадающего списка на взаимодействие:

| Квадрат краски | Взаимодействие   | Результат       |
| -------------- | ---------------- | --------------- |
| 🟥 Без наведения | 🤚➡️🎨               | 🟥 Без изменений |
| 🟩 При наведении | ✋🎨([Наведение])   | 🟨 Желтый       |

Эффект наведения — словно мазок художника, добавляющего новый цвет на холст:

👆🖌️🟨 (Наведение) ➡️ Опция выпадающего списка меняет цвет

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

Расширенная реализация и совместимость с браузерами

Использование теней в CSS

С помощью CSS возможно использовать тени для имитации изменения фона опции, используя параметры типа 0 0 10px 100px #000 inset. Но следует заметить, что это решение не работает во всех браузерах.

Возможности JavaScript

Если стилизация с использованием CSS оказывает сопротивление, JavaScript придёт на помощь. Он способен отслеживать состояние наведения и изменять стиль элементов пользовательского интерфейса.

Преимущества кастомных выпадающих списков

Выпадающие списки, созданные при помощи ul/li и пристроенные радио-кнопки, могут великолепно имитировать поведение стандартных списков. Такой подход предоставляет широкие возможности для кастомизации и взаимодействия.

Полезные материалы

1. CSS :hover селектор – W3Schools — Подробное руководство об использовании селектора CSS :hover.
2. Стандартное оформление выпадающих списков | CSS-Tricks — Полезные советы по стилизации элементов <select>, заслуживающие внимания.
3. Ошибка удаления строки в sqlite на Android – Stack Overflow — Опыт сообщества StackOverflow о стилизации с изменением цвета при наведении на теги <option>.
4. Руководство | DigitalOcean — Пошаговое руководство по созданию выпадающих списков со своим стилем с помощью CSS.
5. :hover – CSS: Каскадные таблицы стилей | MDN — Официальная документация MDN подробно разъясняет работу псевдокласса :hover в CSS.
6. ::selection CSS псевдо-элемент | Can I use... Support tables for HTML5, CSS3, etc — Таблицы, содержащие информацию о поддержке CSS ::selection в элементах <option>/<select> в различных браузерах.