CSS: cтилизация выбранного элемента <option> в <select>

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

Для применения стилей к выбранным элементам <option> рекомендуется использовать JavaScript, так как в CSS ему не соответствует псевдокласс :selected. Подключаем обработчик события change к <select>, дабы изменить стиль:

document.querySelector('select').addEventListener('change', function() {
  this.classList.toggle('selected', !!this.value);
});

Следом активизируем <select>, добавив CSS:

select.selected option:checked {
  background-color: yellow; /* Яркий оттенок для эффективного выделения, как солнечный свет */
}

Нюансы: улучшаем визуал элемента Option

Вглубь разберемся с деталями стилизации уклончивых <option>.

Инструменты стилизации: прямое оформление <option>

Оформление <option> может быть ловушкой из-за разницы поведения браузеров. Но некоторые атрибуты, к примеру, color и background-color, функционируют стабильно:

option:checked {
  color: red; /* Этот оттенок никак не упустить! */
}

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

select:not(:focus) option:checked {
  display: none; // Метод скрыть выбранный пункт из поля зрения
}

Эти правила могут давать разное поведение в браузерах ввиду особенностей рендеринга HTML.

Подробнее об этом расскажет наш спикер на видео

Как привлечь внимание: оформляем закрытый Dropdown

Создадим такой вид для выбранного элемента <select>, чтобы он выделялся, когда список скрыт:

select {
  color: red;
}
select option:not(:checked) {
  color: black;
}

Утонченность в подробностях: применение градиентов

Применяем linear-gradient в качестве background-image для достижения эффекта градиента в <option>:

option:checked {
  background-image: linear-gradient(to right, #ffe0e0, #ffd6d6); /* Оттенки красного для изящного акцента */
}

Этот трюк хорошо поддерживается браузерами на основе Gecko/Webkit, например, Firefox и Chrome.

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

Визуализируйте шахматную доску, где каждая фигура имеет свои правила движения.

| ♜ | ♞ | ♝ | ♛ | ♔ | ♝ | ♞ | ♜ |
|   |   |   |   |   |   |   |   |
|   | ♟ |   |   |   |   |   |   |
|   |   |   | ♟ |   |   |   |   |
|   |   |   |   | ♙ |   |   |   |
|   |   |   |   |   |   |   |   |
|   |   | ♗ |   |   |   |   |   |
|   |   |   |   |   |   |   |   |
| ♖ | ♘ | ♗ | ♕ | ♔ |   | ♘ | ♖ |

Мы бы хотели иметь псевдокласс :selected для <option> в CSS, чтобы выделить выбранные элементы так же просто, как пешка повторяет свои ходы.

Текущее состояние:

|   |   |   |   |   |   |   |   |
|   | ♙ |   |   |   |   |   |   |
|   |   | ⬜ |   |   |   |   |   |

Расчерчиваемое положение:

|   |   |   |   |   |   |   |   |
|   | 🟩 |   |   |   |   |   |   |
|   |   | 🟩 |   |   |   |   |   |

Как бы оно было благородно держать :selected для наших <option>, заметно подсвечивающий выбор, как ходы пешки на доске 🤔.

Адаптация методов оформления для <option>

Стилизация <option>: тонкости подхода

Применение атрибута style непосредственно к <option> позволяет добиться согласованности между браузерами:

<option style="color: red;" selected>Выбранный вариант</option>

Выделяем по атрибутам

Сделаем <option>, отмеченный атрибутом selected, бросающимся в глаза, задав ему более смелые стили:

option[selected] {
  font-weight: bold;
}

Индивидуальное оформление для невыбранных вариантов

Помимо акцентирования выбора, доработаем стилевое оформление для невыбранных вариантов:

select:not(:checked) > option {
  opacity: 0.5;
}

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

1. Примечания MDN Web о псевдоклассе :checked
2. Спецификация селекторов Level 4 от W3C
3. Унифицированное оформление выпадающего списка от CSS-Tricks
4. Настройка выпадающих списков на W3Schools
5. Примечания MDN Web о псевдоклассе :focus
6. Поддержка CSS Selector Level 4 на Can I use...