Решение проблемы с <select> и :after в CSS для WebKit

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

Чтобы стилизовать элемент <select> и добавить элементы, такие как иконка выпадающего списка, этот элемент нужно поместить в контейнер <div>. После этого вы сможете использовать псевдоэлемент :after для внешнего контейнера вместо самого <select>, которому не подходит работа с :after в браузерах на движке WebKit.

CSS:

.select-wrapper:after {
  content: '▼'; /* Символ вашего выбора */
  position: absolute;
  right: 10px; /* Подгоняйте под свои нужды */
  pointer-events: none; /* Клики по стрелке будут активировать select. Удобно, не так ли? */
}

HTML:

<div class="select-wrapper">
  <select>...</select>
</div>

Обертка помогает обеспечить стабильное визуальное представление в различных веб-браузерах, при этом не нарушая стандартное поведение элемента <select>.

Почему стилизация элемента select может быть сложной

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

Когда базовых возможностей CSS недостаточно

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

Совместимость и доступность

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

Использование контейнеров-оберток для стилизации

Мы используем обертки в качестве нашего основного решения. Стили применяются не напрямую к <select>, а к контейнеру через псевдоэлементы CSS. Таким образом, мы стилизуем пользовательский контейнер, создаём стрелки выпадающих списков, границы, фоны и многое другое!

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

Обеспечение доступности

Как сказал Дядя Бен в "Спайдер-Мене": большая сила подразумевает большую ответственность. При стилизации элементов форм мы обязательно учитываем доступность: фокусировку, навигацию с клавиатуры, поддержку экранных читалок. Это столь же важно, как и дизайн.

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

Пройдясь по основным моментам, можно сделать следующий вывод:

Цель: Сделать стильный `<select>`
Проблема: Ограниченные возможности стандартной стилизации
Решение: Обернуть `<select>` в `<div>` и применить нужные стили!

Решаем проблемы с учётом всех нюансов – вот наш принцип!

SVG и свойство appearance

Вы также можете использовать -webkit-appearance: none; для скрытия стандартной стрелки и добавить изображение в формате SVG с помощью background-image.

Пример:

.select-style {
  -webkit-appearance: none; /* До свидания, нативная стрелка */
  background-image: url('data:image/svg+xml;utf8,<svg...');
}

Убедитесь, что содержимое SVG для background-image правильно кодировано для URL, чтобы избежать ошибок при анализе кода.

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

1. ::after – CSS | MDN — подробное руководство по использованию ::after на MDN.
2. ::before / ::after | CSS-Tricks — Важные советы от экспертов CSS на CSS-Tricks.
3. CSS Псевдоэлементы | W3Schools — W3Schools объясняет основные принципы псевдоэлементов CSS.
4. "::after" | Can I use... Support tables for HTML5, CSS3, etc — Проверка поддержки ::after в разных браузерах.
5. WebKit Feature Status | WebKit — Официальный обзор поддержки псевдоэлементов CSS в веб-движке WebKit.
6. Идеи для творчества... | CodePen — Вдохновляющие примеры от разработчиков на CodePen.