Как стилизовать выпадающий список css

Как оформить раскрывающийся список <select> с помощью только CSS?

Когда-то было довольно сложно оформить элемент <select> для всех браузеров.

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

Оказывается, значительная часть стилей могут создать постоянный и приемлемый блок выбора (selection box) в новых браузерах, лучшим способом сохраняясь в старых браузерах.

Есть множество элементов в блоке выбора, к которым можно применить стиль, в частности width, height, font, border, color, padding, box-shadow и background color.

Рассмотрим пример, где применен стиль:

Пример¶

Но стрелка выпадающего (раскрывающегося) списка не меняется. Нет никакого непосредственного способа для ее оформления, но существуют некоторые методы, которые могут быть использованы для изменения стрелки раскрывающегося списка по умолчанию. Давайте рассмотрим эти 3 метода ниже.

1) Используйте appearance: none;¶

Чтобы скрыть стрелку по умолчанию раскрывающегося списка <select> , установите CSS свойство appearance в значение "none", и дальше добавьте выбранную вами стрелку с помощью сокращенного свойства background.

Пример¶

2) Используйте overflow: hidden;¶

Сначала вставьте элемент <select> в div контейнер с фиксированной шириной и установите overflow: hidden . Потом для элемента <select> задайте ширину на 20px больше, чем элемент <div> . Таким образом, стрелка раскрывающегося списка будет скрыта (так как для контейнера установлено overflow: hidden ), и теперь уже можно будет применить фоновое изображение с правой стороны <div> .

Пример¶

3) Используйте pointer-events: none;¶

CSS свойство pointer-events может быть использовано для создания индивидуальных раскрывающихся списков <select> .

Пример¶

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

Установите знаки с помощью свойства content и установите соответствующий font. Здесь можно установить "Consolas" и "monospace". Потом поверните знак пунктуации, используя свойство transform.

Стильный выпадающий список на CSS Стильный выпадающий список на CSS

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

Плавная анимация предусмотрена только в последних браузерах. Также для правильного отображения было добавлено несколько строчек JavaScript. И так, приступим.

Шаг 1. HTML

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

Шаг 2. JavaScript

Для работы нам необходимо несколько строчек javascript. Данный сценарий переключает класс .active, когда щелкаете по оболочке. Следует понимать, что если у оболочки нет класса .active, то данный сценарий добавляет его и если он присутствует,или наоборот-удаляет его.

Вторая часть кода служит элементом для сворачивания списка, при нажатии курсора в другой части экрана, то есть список теряет свой класс .active.

Пример 1

Рассмотрим более детально первый пример.

Шаг 1. HTML

Для данного списка нам необходимо несколько элементов. Также поместим несколько элементов в выпадающий список.

C разметкой закончили, приступим к стилям.

Шаг 2. CSS

Организацию стилей мы начнем из создания оболочки:

Далее добавим небольшую стрелку справа с псевдо-элементом.

Также добавим небольшую кнопку, которая будет активна при выпадающем списке.

Когда мы задали позиционирование выпадающего списка и поместили под кнопкой придав ему параметр top: 100%, кроме этого список скрытный, мы уменьшили его непрозрачность до 0. Далее установим некоторые стили для выпадающего списка.

Далее нам необходимо задать параметры когда щелкаете по кнопке, чтобы показать список.

Шаг 3. JavaScript

Теперь мы заставим кнопку выводить некоторые значения значение:

С этим примером мы закончили, приступим к следующему.

Пример 2

Далее мы рассмотрим список, который нам предложит войти в профиль через аккаун различных популярных социальных сетей.

Шаг 1. HTML

Мы будем использовать теги i для того, чтобы вывести на экран небольшие значки от FontAwesome.

Шаг 2. CSS

Теперь рассмотрим стили обложки, они мало чем отличаются от первого примера.

Также создаем стрелку, аналогичную можно наблюдать в первом примере.

Теперь добавляем выпадающий список.

Следует обратить внимание, что мы будем использовать переход, который заставит список постепенно появляться и исчезать. Применим некоторые стили для списков и значков.

К ссылкам мы добавили разноцветные полоски, которые будут придавать списку большей яркости. Далее мы добавим направление стрелки при активном и пассивном состоянии списка.

Шаг 3. JavaScript

Оживим наши элементы с помощью JavaScript.

Пример 3

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

Шаг 1. HTML

C разметкой закончили, перейдем к стилям.

Шаг 2. CSS

В данном примере мы будем использовать границы, тени и закругленные углы, также мы добавим указательную стрелку.

Рассмотрим стили выпадающего списка и его подпунктов.

Шаг 3. JavaScript

C помощью javascript мы изменим значение выбранной кнопки.

С этим примером закончили, приступим к следующему.

Пример 4

В данном примере мы создадим список с элементами необходимых дел.

Шаг 1. HTML

Мы добавили некоторые ссылки и значки, чтобы скрасить список.

Шаг 2. CSS

Рассмотрим общие стили списка.

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

Некоторые стили для выпадающего списка.

Установим верхние пространство, для этого установим отступ со значением в 1px, Слева установим в -1px чтобы вытянуть позицию выпадающего списка.

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

Теперь настроим красные полоски по бокам, Есть два способа сделать это: один с псевдо-элементами и один с градиентами. Мы рассмотрим оба способа.

Некоторое дополнительное состояние.

Шаг 3. JavaScript
Пример 5

В последнем примере мы рассмотрим выпадающий список для администратора, где он может выбрать необходимые ему настройки.

Шаг 1. HTML

С разметкой закончили, перейдем к стилям.

Шаг 2. CSS

Зададим общие параметры для списка.

Активное состояние для списка.

В активном состоянии, мы устанавливаем max-height выпадающего списка к 400px.

Шаг 3. JavaScript

Также добавлена поддержка устаревших браузеров.

Вот и все. Готово!

Материал взят из зарубежного источника. И представлен исключительно в ознакомительных целях.

CSS для настройки HTML-элемента SELECT

Когда речь заходит о кастомизации полей формы, наибольшую сложность представляет стилизация HTML-элемента select . В этом случае разработчики часто обращаются за библиотекой или фреймворком, в которых не всегда удачно и в полном объёме воспроизводится вся функциональность нативного элемента управления.

Если не брать во внимание суждения о ценности элементов управления select или подобных им, можно констатировать факт: полностью воссоздать их функции, учесть все нюансы поведения и сохранить доступность для людей с ограниченными возможностями &#8212; гиперсложная задача.

Ниже будет показано, что и как можно сделать с внешним видом select с помощью обычного CSS, оставаясь в рамках требований WCAG к доступности (читаемость, контрастность, пользовательские настройки), а также вариантов написания: справа-налево и слева-направо.

Основные стили

Сперва сбросим параметры текста.

Свойство font наследует все стили от контейнера(ов). Иногда при сбросе CSS указывают размер шрифта font-size , но в этом нет необходимости. font будет наследовать стили всех своих параметров: font-size , font-family , font-style , font-variant , font-weight , font-stretch и font-height (если установлено). Ещё он добавляет высоту строки line-height . В-общем, шрифт будет адаптироваться к изменениям, которые касаются всей страницы, либо с помощью надстроек, либо через настройки браузера/системы.

letter-spacing

Если пользователь (или автор) изменяет параметры текста, чтобы повлиять на расстояние между буквами, это не будет касаться предустановленных для поля значений. Наследование параметров font не повлияет на межбуквенное расстояние, поэтому нужно явно указать необходимость наследования значения letter-spacing: inherit . Это поможет соответствовать требованиям WCAG 2.1 Success Criterion 1.4.12: Text Spacing

word-spacing

Аналогично межбуквенному letter-spacing , значение word-spacing для управления интервалами между словами не будет наследоваться, если это не объявить явным образом. WCAG 1.4.12 применяется и для расстояния между словами.

line-height

Обратите внимание, что в коде не устанавливается высота строки line-height . Это значение нормально наследуется вместе с остальными параметрами шрифта в свойстве font . Если обнаружится, что это не так (например, из-за явной установки высоты строки ) можно добавить line-height: inherit , чтобы соответствовать WCAG 1.4.12.

Пример

В этом примере демонстрируется применение этого минимального набора стилей.

Как настроить стрелку для select

Часто, стрелка (индикатор того, что это выпадашка &#8212; поле выбора значений) по умолчанию плохо вписывается в дизайн и её лучше заменить на что-нибудь более подходящее. Вот необходимый минимум стилей, с помощью которых можно заменить стрелку у select :

Здесь удаляются стили, устанавливаемые браузером, освобождается место для графической стрелки, а затем новая картинка стрелки вставляется в качестве фона. Это должно применяться только в том случае, если select обычный и предназначен для выбора одиночного значения, а не нескольких ( multiple ).

Этот пример демонстрирует замену стрелки по умолчанию элементу select .

Продолжение настройки select

Стоит обратить внимание, что интервалы у текста не очень хороши. Потенциально можно сделать их более привлекательными, удобными и доступными для пользователей с помощью всего нескольких дополнительных стилей. Например, можно настроить border и padding . Эти два свойства расширяют базовые стили, описанные выше, чтобы сделать текстовые поля более удобными.

border

Изменение значений CSS-свойств для рамки поля сопряжено с риском. Согласно WCAG (SC 1.4.11: Non-text Contrast), если для элемента формы не вносить изменений в стили по умолчанию, то это никак не повлияет на контрастность. Тем не менее, с помощью border: 0.1em solid будет установлена толщина рамки на основе размера шрифта. Теперь рамка поля выбора будет масштабироваться вместе с текстом. Заодно она становится толще, чем используется по умолчанию в большинстве браузеров.

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

padding

Трогать padding для select не обязательно. Однако, содержимое поля будет немного легче читать и использовать, если немного его настроить. Это поможет сделать отступы в select ближе к аналогичным в textarea и input , если их тоже предстоит настраивать.

Стилизация состояний select

Поля формы могут находиться в разных состояниях. Отключенное, сфокусированное, с ошибкой и обязательное &#8212; это наиболее распространенные состояния, которые можно применить к элементам управления. Не обязательно применять какие-либо из предлагаемых стилей, но можно использовать селекторы и логику, лежащие в их основе, чтобы реализовать состояния в собственной библиотеке шаблонов.

Отключено disabled

Отключенные поля исключаются из требований к контрастности WCAG, как и элементы управления интерфейса по умолчанию. Если ничего не делать, браузер самостоятельно сделает всё необходимое. Поэтому здесь не стоит что-то менять в настройках цвета фона поля или текста, достаточно позволить браузеру выполнить эту работу по его усмотрению.

Сфокусировано focused

WCAG SC 2.4.7 не рекомендует здесь ничего делать, согласно Technique G149, потому что браузер добавляет свой собственный стиль для фокуса. Тем не менее, можно сделать его ещё более очевидным, например, использовать синий контур с хорошим контрастом к белому и добавить тень:

Только для чтения readonly

Нативный элемент <select> не поддерживает атрибут readonly .

Обязательное поле required

Пока label указывает, что поле обязательное (вместе с атрибутом required ), нет большой необходимости стилизовать select как-то особенно. Но, например, можно увеличить обязательному полю толщину границы слева. В совокупности с оформлением других полей это может дать достаточно информации. Можно не менять цвет рамки, позволяя наследование (по умолчанию от стилей пользовательского агента).

Поле с ошибками

Одной красной рамки тут будет недостаточно (из-за сбоев WCAG по контрасту и только по цвету), а массивные тени могут испачкать всю страницу. Слишком много усилий по привлечению внимания к ошибкам создают шум, требующий от пользователей больших усилий для их устранения. Вместо этого можно добавить небольшой индикатор в углу поля. Градиент, образующий красную метку, устанавливает белый цвет фона поля. Обратите внимание, здесь в первый раз полю select явно задаётся цвет фона.

Здесь не будет использоваться селектор :invalid , потому что он может негативно влиять на нативное представление ошибок в браузере. Вместо этого можно использовать наличие-отсутствие aria-invalid , не просто переключая его с true на false , а добавляя или удаляя этот атрибут. Поскольку стрелка, как было решено выше, также является фоновым изображением, её здесь придётся повторно установить, если речь об обычном select без множественного выбора ( multiple ).

Стили для интернационализации

Чтобы не сильно усложнять, здесь речь пойдёт только о стилях написания справа налево, а при необходимости, будет не трудно разобраться и адаптировать это.

Для нативного поля выбора select достаточно поправить только стили, которые написаны, исходя из ожиданий для языков с написанием слева направо, а именно: стрелка, индикаторы обязательности и ошибки, которые позиционируются в зависимости от того, с какой стороны пользователь начинает читать. Здесь достаточно переместить стрелку, красную метку и более толстую границу на противоположную сторону.

Стили режима высокой контрастности Windows

Поскольку используются нативные элементы управления, нет вмешательства в цвета и стили для критически важных функций, которые отсутствуют в WHCM, т.е. в основном были применены системные стили &#8212; в этом направлении особо ничего делать не нужно.

Стиль подсветки контура outline здесь хорошо адаптируется. Переключение в disabled работает, как и должно по умолчанию. Стили border не затрагивают цвет и не повлияют работу с любой контрастностью.

Единственное, что может теряться &#8212; это индикация ошибки. При таком небольшом количестве цветов (система WHCM) может понадобиться акцент на другом визуальном индикаторе ошибок. Например, использовать label , чтобы четко указать на ошибки.

Стили для печати

Толщина границы масштабируется в зависимости от размера шрифта &#8212; это можно игнорировать. Пользователь, скорее всего, выберет размер шрифта, который будет разборчивым. Фоном отключенных полей и полей с ошибками можно управлять в настройках печати. Размер текста для поля не изменялся, наследуется. Здесь ничего не надо делать.

Стили для тёмного режима (dark mode)

Тёмный режим &#8212; это функциональный запрос, который нужно создать для поддержки стилей. Здесь не будет примера, а только рекомендации. Достаточно выбрать цвет фона и цвет шрифта и не писать все новые стили с нуля.

Следует наследовать цвет текста и фон (или сделать его прозрачным) и выбрать цвет рамки, который по-прежнему соответствует требованиям контрастности. Стили состояния при фокусировке тоже нуждаются в достаточном контрасте. Метка для состояния при ошибке зависит от фонового градиента к белому, поэтому нужно будет полностью переопределить стили ошибок, в том числе для RTL. Отключенные ( disabled ) поля также потребуют некоторой работы, так как явно заданы цвета границ и текста.

Заключение

Пример стилизованного select в разных состояниях с сохранением WCAG-доступности.

Когда речь идет о стилизации полей формы, нужно обратить внимание на минимальный набор стилей, который понадобится, чтобы обеспечить соответствие общему дизайну и поддержку состояний, которые перечислены выше.

Похожие публикации, посвященные стилизации HTML-элемента select : Select Like It’s 2019 и Custom Select Styles with Pure CSS немного отличаются подходами, но заслуживают не меньшего внимания. Может быть эти варианты даже лучше соответствуют вашим целям и требованиям.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *