Меняем цвет фона опции списка при наведении: 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
. А при наведении курсора мыши всё становится несколько сложнее.
[AsideBanner]
Создание пользовательского выпадающего списка для точной стилизации
Создание пользовательского выпадающего списка на базе ul/li
позволяет надёжно воспроизводить эффекты наведения, паттерны взаимодействия и доступность стандартных списков. Тут без JavaScript для контроля событий и применения стилей не обойтись.
Визуализация
Посмотрите, как интерактивная 🎨 палитра отражает реакцию каждого элемента выпадающего списка на взаимодействие:
| Квадрат краски | Взаимодействие | Результат |
| -------------- | ---------------- | --------------- |
| 🟥 Без наведения | 🤚➡️🎨 | 🟥 Без изменений |
| 🟩 При наведении | ✋🎨([Наведение]) | 🟨 Желтый |
Эффект наведения — словно мазок художника, добавляющего новый цвет на холст:
👆🖌️🟨 (Наведение) ➡️ Опция выпадающего списка меняет цвет
Просто меняя цвет фона опции, мы добавляем динамичности и делаем восприятие более интуитивным, при этом не усложняя процесс взаимодействия с элементами интерфейса.
Расширенная реализация и совместимость с браузерами
Использование теней в CSS
С помощью CSS возможно использовать тени для имитации изменения фона опции, используя параметры типа 0 0 10px 100px #000 inset
. Но следует заметить, что это решение не работает во всех браузерах.
Возможности JavaScript
Если стилизация с использованием CSS оказывает сопротивление, JavaScript придёт на помощь. Он способен отслеживать состояние наведения и изменять стиль элементов пользовательского интерфейса.
Преимущества кастомных выпадающих списков
Выпадающие списки, созданные при помощи ul/li
и пристроенные радио-кнопки, могут великолепно имитировать поведение стандартных списков. Такой подход предоставляет широкие возможности для кастомизации и взаимодействия.
Полезные материалы
- CSS :hover селектор – W3Schools — Подробное руководство об использовании селектора CSS :hover.
- Стандартное оформление выпадающих списков | CSS-Tricks — Полезные советы по стилизации элементов
<select>
, заслуживающие внимания. - Ошибка удаления строки в sqlite на Android – Stack Overflow — Опыт сообщества StackOverflow о стилизации с изменением цвета при наведении на теги
<option>
. - Руководство | DigitalOcean — Пошаговое руководство по созданию выпадающих списков со своим стилем с помощью CSS.
- :hover – CSS: Каскадные таблицы стилей | MDN — Официальная документация MDN подробно разъясняет работу псевдокласса
:hover
в CSS. - ::selection CSS псевдо-элемент | Can I use... Support tables for HTML5, CSS3, etc — Таблицы, содержащие информацию о поддержке CSS
::selection
в элементах<option>/<select>
в различных браузерах.