Как стилизовать option select?
Не получается применить шрифт и бордер к option. Почему и как это исправить?
.sortvibor < float: left; margin-top: 10px; font-family: 'PT Sans Narrow 400'; line-height: 20px; position: relative; >.sortvibor span < font-size: 18px; color: #000; >.sortvibor form < display: inline-block; padding-left: 5px; >.sortvibor select < font-family: 'PT Sans Narrow 400'; line-height: 20px; color: #000; font-size: 14px; min-width: 155px; padding: 2px 50px 2px 5px; appearance: none; -webkit-appearance: none; -moz-appearance: none; position: relative; background-color: transparent; text-decoration: underline; outline: none; border: 1px solid #467797; >.sortvibor option:checked < display: none; >.sortvibor option:not(:checked) < color: #467797; >.sortvibor option < border: 1px solid #467797; >.sortvibor .strelka
Сортировать: ▼ Нужно чтобы шрифт и бордер был таким же, как и у всего select. Бордер применяется только к родительскому окну.
Отслеживать
задан 9 сен 2016 в 4:32
2,236 4 4 золотых знака 26 26 серебряных знаков 68 68 бронзовых знаков
2 ответа 2
Сортировка: Сброс на вариант по умолчанию
option css-ом не стилизуются. Кастомные select стилизуются с помощью js\jquery. Например так:
*, *:before, *:after < box-sizing: border-box; >ul < padding: 0; margin: 0; list-style-type: none; >.select < display: inline-block; vertical-align: top; max-width: 245px; width: 100%; >.select-wrap < max-width: 700px; width: 100%; margin: 20px auto; >.select-wrap select < margin: 20px; >.select__gap < background: transparent; color: #467797; border: 1px solid #467797; text-transform: uppercase; font-size: 15px; padding: 10px 15px; cursor: pointer; position: relative; >.on.select__gap, .select__gap:hover < color: #467797; >.select__list < background: transparent; border: 1px solid #467797; margin: 0px 0; >.select__list.on < display: block; >.select__item span < display: block; padding: 10px 15px; cursor: pointer; color: #333; >.select__item.selected, .select__item span:hover < color: #467797; >.select__gap:after < content: ''; display: block; width: 10px; height: 10px; position: absolute; right: 15px; top: 50%; margin-top: -7px; border-left: 7px solid transparent; border-right: 7px solid transparent; border-top: 14px solid #000; -webkit-transition: all .27s ease-in-out; -o-transition: all .27s ease-in-out; transition: all .27s ease-in-out; -webkit-transform: rotate(0deg); -ms-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); >.on.select__gap:after
Сортировать: Стилизация Select-Option (почти) без JavaScript
Стилизация некоторых стандартных элементов — довольно нетривиальная задача.
Разумеется, хороший специалист может стилизовать что угодно, однако всё упирается в сложность этого действия.
Для стилизации радиокнопок и чекбоксов потребуется совсем немного времени — идея стилизации label со скрытыми input не нова, и давно и повсеместно используется.
Для стилизации остального — есть JavaScript.
Сегодня я хочу рассказать Вам о том, как можно относительно просто стилизовать выпадающие списки, с минимальным кодом JavaScript (от 0 до 26 строк) и минимальной дополнительной разметкой HTML.
На днях у меня, как это часто и бывает, возникла необходимость стилизовать выпадающий список. Однако именно выпадающим списком он становился только в мобильной версии, до этого же он вёл себя как самая обычная группа радиокнопок.
И вот, когда я уже почти закончил писать очередную жуткую конструкцию, призванную заменить несчастный Select, у меня возник вопрос:
А зачем?
Обычно этот вопрос ведёт к умудрённой прокрастинации, переосмыслению жизни и т.д., но в этот раз что-то пошло не так, и я понял, что вопрос и правда был хорошим, а главное — полезным.
Небольшой ликбез:
Итак, для тех, кто в танке, а также тех, кому выпадающие списки доставили столько боли, что они решили забыть о них, как о страшном сне, я немножко (правда) напомню о том, что это такое.
Выпадающие списки состоят из 2 основных элементов:
- Select — контейнер для всего списка
- Option — элемент списка
Основной функционал выпадающего списка — отправка информации о выбранном(ых) пункте(ах) на сервер.
Для полноты картины, вот список атрибутов элементов (чтобы можно было оценить, сколько из них будут реализованы):
- Select — disabled , form , multiple , name , required , size
- Option — disabled , label , selected , value
Уже было написано немало слов, поэтому — ближе к коду:
Итак, чем же хорош этот код? (всё, без чего можно обойтись при объяснении, убрано специально)
Давайте отметим, какие пункты из функционала Select и Option автоматически стали возможны, за счёт использования input + label:
- Select — form, name, required
- Option — disabled, label, selected, value
- Select — disabled, multiple, size
- Option — полностью реализовано
Чтобы реализовать пункт Select.multiple (множественный выбор) — достаточно сделать так:
Мы всего-навсего меняем тип input’ов с Radio на Checkbox, и получаем практически полный аналог multiple.
Разница в том, что для множественного выбора не нужно зажимать ctrl (ну а если кто-то хочет полностью имитировать функционал — JavaScript в помощь).
Что осталось?
- Select — disabled, size
- Option — полностью реализовано
- Select.size — какой зададите размер, такой и будет. Необходимо будет просто добавить контейнер.
- Select.disabled — для контейнера нужно добавить pointer-events: none , чтобы отменить реакцию на любые действия пользователя (наведение, клики и т.д.), ну и можно сделать его чуть прозрачным.
Нужно также добавить автозаполнение заголовка для выпадающего меню с единственным выбором, а также возникнет проблема при сбросе формы (кнопка Reset), т.к. заголовок не сбросится. Но и это — вполне решаемо (с помощью JavaScript).
А теперь — примеры:
Немного реализации (выпадающее меню с единичным выбором):
И ещё немного (не выпадающее меню с множественным выбором):
Бонус: не знаю, зачем я это сделал, но… выпадающее меню с единичным выбором и работающим на CSS сбросом заголовка:
Зачем это нужно?
В связи с тем, что судя по комментариям, не все понимают, для чего будет полезен данный код, считаю нужным дать некоторые разъяснения.
При стилизации выпадающих списков вида:
есть серьёзные ограничения стилизации. Поэтому их заменяют на простые списки:
которым с помощью JavaScript навешивают весь необходимый функционал.
Поскольку изначально списки никак не взаимодействуют с формами, из-за этого возникают проблемы.
Мало того, что необходимо реализовать весь основной функционал:
- переключение пунктов и их взаимодействие
- состояния (checked, disabled)
- привязка к форме и отправка данных на сервер
- инициализация исходных данных (автозаполнение)
- сброс формы (при нажатии на кнопку «reset» список нужно вернуть в состояние при инициализации)
Фактически, если в JavaScript что-то ломается, не важно, из-за чего — скрипт не догрузился, возник баг, внесли правки — при возникновении любой проблемы выпадающий список превращается в… что-то, выглядящее как выпадающий список, но не работающее.
Вообще. Никак.
Для пользователя это будет выглядеть так: есть выпадающий список, но работать с ним нельзя.
Для сервера это будет выглядеть ещё «веселее» — пришла форма, в которой не хватает части данных. Хорошо, что такую ситуацию заранее предусмотрели при разработке… Ведь предусмотрели, правда?
Плюсы получившегося решения:
- Весь основной функционал (смотри выше), кроме сброса заголовка ВСЕГДА будет работать. Даже если у человека вообще отключён JavaScript (хоть это и стало практически неактуально). Единственное, что может пойти не так — нельзя будет открыть список. Но и в этом случае отправится значение по умолчанию, плюс смену состояний — список открыт/закрыт — можно реализовать прямо в коде html (защита от проблем с файлом JS), или вообще открывать по наведению.
- Данного функционала достаточно для большинства подобных списков. Да, возникнут проблемы у людей, использующих дополнительный функционал (об этом ниже). Но в случае со списком на ul — li для работы и вовсе требуется библиотека, и много что может пойти не так.
Минусы (доп. функционал, который не реализован, и добавляется JavaScript’ом / библиотеками):
- Переключение с помощью tab
- Управление стрелками (в стандартном select можно менять выбранный пункт кнопками вверх-вниз)
- Озвучка скринридерами (для людей, у которых проблемы со зрением текст на странице озвучивается)
- Не работает как нативный select на мобильных (на мобильных select довольно удобно работает сам по себе. При желании можно определять устройство и подменять на стандартный select)
- Список не умеет выпадать вверх, если снизу край вьюпорта (JS сделает это)
- Группировка пунктов (аналог OptGroup) (сложно, и очень редко встречается)
Как видно, ничто из вышеперечисленных минусов не является критичным для подавляющего большинства списков, и при необходимости реализуется с помощью JavaScript, а потому.
Добро пожаловать в мир, где Ваши библиотеки для стилизации Select-Option-подобных списков станут чуточку меньше, а работа с этими списками без библиотек — почти комфортной!
UPD: как оказалось, в случае с чекбоксами атрибут required работает некорректно, и его также необходимо эмулировать с помощью JavaScript (на данный момент обязательными становятся все чекбоксы, отмеченные как required, и только они)
Стилизация select CSS для отображения в разных браузерах
В этой статье мы расскажем о том как реализуется стилизация select CSS для отображения в разных браузерах с примерами, фрагментами кода и скриншотами.
Для тестирования на Windows 8.1 использовались следующие браузеры:
• Firefox 35 ;
• Internet Explorer 11 ;
• Google Chrome 40 ;
• Windows Safari 5.1 .
Список свойств CSS , которые поддерживаются браузерами:
| CSS | Firefox | Chrome | IE11 |
| Background | ДА | ДА | ДА |
| Border | ДА | ДА | ДА |
| box-shadow | ДА | ДА | ДА |
| Color | ДА | ДА | ДА |
| Font | ДА | ДА | ДА |
| Height | ДА | ДА | ДА |
| margin | ДА | ДА | ДА |
| opacity | ДА | ДА | ДА |
| padding | ДА | ДА | ДА |
| position | ДА | ДА | ДА |
| width | ДА | ДА | ДА |
Были протестированы следующие сценарии стилизации SELECT CSS :
- Элемент SELECT без применения CSS ;
- Элемент SELECT с применением свойств CSS padding и height или line-height ;
- Элемент SELECT с применением свойств CSS border , background и text-color ;
- Элемент SELECT с применением различных правил CSS .
Обновлено: 2021-07-14 19:25:48 Вадим Дворников автор материала
Элемент SELECT без применения CSS
SELECT без применения CSS выглядит одинаково во всех перечисленных браузерах. За исключением того, что Internet Explorer для SELECT CSS оформления по умолчанию использует черную рамку, и стили стрелки выпадающего списка определяются по-разному.
// HTML
CSS для настройки HTML-элемента SELECT
Когда речь заходит о кастомизации полей формы, наибольшую сложность представляет стилизация HTML-элемента select . В этом случае разработчики часто обращаются за библиотекой или фреймворком, в которых не всегда удачно и в полном объёме воспроизводится вся функциональность нативного элемента управления.
Если не брать во внимание суждения о ценности элементов управления select или подобных им, можно констатировать факт: полностью воссоздать их функции, учесть все нюансы поведения и сохранить доступность для людей с ограниченными возможностями – гиперсложная задача.
Ниже будет показано, что и как можно сделать с внешним видом select с помощью обычного CSS, оставаясь в рамках требований WCAG к доступности (читаемость, контрастность, пользовательские настройки), а также вариантов написания: справа-налево и слева-направо.
Основные стили
Сперва сбросим параметры текста.
select
font
Свойство 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
Часто, стрелка (индикатор того, что это выпадашка – поле выбора значений) по умолчанию плохо вписывается в дизайн и её лучше заменить на что-нибудь более подходящее. Вот необходимый минимум стилей, с помощью которых можно заменить стрелку у select :
select < font: inherit; letter-spacing: inherit; word-spacing: inherit; -moz-appearance: none; -webkit-appearance: none; appearance: none; >select:not([multiple]) < padding-right: 1.2em; background-repeat: no-repeat; background-position: calc(100% - 0.25em) 0.35em; background-size: 0.85em auto; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 80'%3E%3Cpath d='M70.3 13.8L40 66.3 9.7 13.8z' fill='%23000'%3E%3C/path%3E%3C/svg%3E"); >/* скроет иконку стрелки в IE */ select::-ms-expand
Здесь удаляются стили, устанавливаемые браузером, освобождается место для графической стрелки, а затем новая картинка стрелки вставляется в качестве фона. Это должно применяться только в том случае, если select обычный и предназначен для выбора одиночного значения, а не нескольких ( multiple ).
Этот пример демонстрирует замену стрелки по умолчанию элементу select .
Продолжение настройки select
Стоит обратить внимание, что интервалы у текста не очень хороши. Потенциально можно сделать их более привлекательными, удобными и доступными для пользователей с помощью всего нескольких дополнительных стилей. Например, можно настроить border и padding . Эти два свойства расширяют базовые стили, описанные выше, чтобы сделать текстовые поля более удобными.
select < font: inherit; letter-spacing: inherit; word-spacing: inherit; -moz-appearance: none; -webkit-appearance: none; appearance: none; /* рамка и отступы */ border: 0.1em solid; padding: 0 0.2em; >border
Изменение значений CSS-свойств для рамки поля сопряжено с риском. Согласно WCAG (SC 1.4.11: Non-text Contrast), если для элемента формы не вносить изменений в стили по умолчанию, то это никак не повлияет на контрастность. Тем не менее, с помощью border: 0.1em solid будет установлена толщина рамки на основе размера шрифта. Теперь рамка поля выбора будет масштабироваться вместе с текстом. Заодно она становится толще, чем используется по умолчанию в большинстве браузеров.
Здесь умышленно не установлен цвет рамки, чтобы позволить браузеру сделать это самостоятельно. Конечно, если фон страницы не белый, можно изменить цвет рамки.
padding
Трогать padding для select не обязательно. Однако, содержимое поля будет немного легче читать и использовать, если немного его настроить. Это поможет сделать отступы в select ближе к аналогичным в textarea и input , если их тоже предстоит настраивать.
Стилизация состояний select
Поля формы могут находиться в разных состояниях. Отключенное, сфокусированное, с ошибкой и обязательное – это наиболее распространенные состояния, которые можно применить к элементам управления. Не обязательно применять какие-либо из предлагаемых стилей, но можно использовать селекторы и логику, лежащие в их основе, чтобы реализовать состояния в собственной библиотеке шаблонов.
Отключено disabled
Отключенные поля исключаются из требований к контрастности WCAG, как и элементы управления интерфейса по умолчанию. Если ничего не делать, браузер самостоятельно сделает всё необходимое. Поэтому здесь не стоит что-то менять в настройках цвета фона поля или текста, достаточно позволить браузеру выполнить эту работу по его усмотрению.
Сфокусировано focused
WCAG SC 2.4.7 не рекомендует здесь ничего делать, согласно Technique G149, потому что браузер добавляет свой собственный стиль для фокуса. Тем не менее, можно сделать его ещё более очевидным, например, использовать синий контур с хорошим контрастом к белому и добавить тень:
select:focus
Только для чтения readonly
Нативный элемент не поддерживает атрибут readonly .
Обязательное поле required
Пока label указывает, что поле обязательное (вместе с атрибутом required ), нет большой необходимости стилизовать select как-то особенно. Но, например, можно увеличить обязательному полю толщину границы слева. В совокупности с оформлением других полей это может дать достаточно информации. Можно не менять цвет рамки, позволяя наследование (по умолчанию от стилей пользовательского агента).
select[required]
Поле с ошибками
Одной красной рамки тут будет недостаточно (из-за сбоев WCAG по контрасту и только по цвету), а массивные тени могут испачкать всю страницу. Слишком много усилий по привлечению внимания к ошибкам создают шум, требующий от пользователей больших усилий для их устранения. Вместо этого можно добавить небольшой индикатор в углу поля. Градиент, образующий красную метку, устанавливает белый цвет фона поля. Обратите внимание, здесь в первый раз полю select явно задаётся цвет фона.
Здесь не будет использоваться селектор :invalid , потому что он может негативно влиять на нативное представление ошибок в браузере. Вместо этого можно использовать наличие-отсутствие aria-invalid , не просто переключая его с true на false , а добавляя или удаляя этот атрибут. Поскольку стрелка, как было решено выше, также является фоновым изображением, её здесь придётся повторно установить, если речь об обычном select без множественного выбора ( multiple ).
select[aria-invalid] < background: linear-gradient( 135deg, rgba(255, 0, 0, 1) 0, rgba(255, 0, 0, 1) 0.4em, rgba(255, 255, 255, 0) 0.4em ); >select[aria-invalid]:not([multiple]) < background-repeat: no-repeat, no-repeat; background-position: 0 0, calc(100% - 0.25em) 0.35em; background-size: 0.85em auto; background-image: linear-gradient( 135deg, rgba(255, 0, 0, 1) 0, rgba(255, 0, 0, 1) 0.4em, rgba(255, 255, 255, 0) 0.4em ), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 80'%3E%3Cpath d='M70.3 13.8L40 66.3 9.7 13.8z' fill='%23000'%3E%3C/path%3E%3C/svg%3E"); >Стили для интернационализации
Чтобы не сильно усложнять, здесь речь пойдёт только о стилях написания справа налево, а при необходимости, будет не трудно разобраться и адаптировать это.
Для нативного поля выбора select достаточно поправить только стили, которые написаны, исходя из ожиданий для языков с написанием слева направо, а именно: стрелка, индикаторы обязательности и ошибки, которые позиционируются в зависимости от того, с какой стороны пользователь начинает читать. Здесь достаточно переместить стрелку, красную метку и более толстую границу на противоположную сторону.
*[dir="rtl"] select:not([multiple]) < padding-right: 0.2em; padding-left: 1.2em; background-position: 0.25em 0.35em; >*[dir="rtl"] select[required] < border-left-width: 0.1em; border-right-width: 0.3em; >*[dir="rtl"] select[aria-invalid] < background: linear-gradient( 225deg, rgba(255, 0, 0, 1) 0, rgba(255, 0, 0, 1) 0.4em, rgba(255, 255, 255, 0) 0.4em ); >*[dir="rtl"] select[aria-invalid]:not([multiple]) < background: linear-gradient( 225deg, rgba(255, 0, 0, 1) 0, rgba(255, 0, 0, 1) 0.4em, rgba(255, 255, 255, 0) 0.4em ), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 80'%3E%3Cpath d='M70.3 13.8L40 66.3 9.7 13.8z' fill='%23000'%3E%3C/path%3E%3C/svg%3E"); background-repeat: no-repeat; background-size: auto, 0.85em auto; background-position: 0 0, 0.25em 0.35em; >Стили режима высокой контрастности Windows
Поскольку используются нативные элементы управления, нет вмешательства в цвета и стили для критически важных функций, которые отсутствуют в WHCM, т.е. в основном были применены системные стили – в этом направлении особо ничего делать не нужно.
Стиль подсветки контура outline здесь хорошо адаптируется. Переключение в disabled работает, как и должно по умолчанию. Стили border не затрагивают цвет и не повлияют работу с любой контрастностью.
Единственное, что может теряться – это индикация ошибки. При таком небольшом количестве цветов (система WHCM) может понадобиться акцент на другом визуальном индикаторе ошибок. Например, использовать label , чтобы четко указать на ошибки.
Стили для печати
Толщина границы масштабируется в зависимости от размера шрифта – это можно игнорировать. Пользователь, скорее всего, выберет размер шрифта, который будет разборчивым. Фоном отключенных полей и полей с ошибками можно управлять в настройках печати. Размер текста для поля не изменялся, наследуется. Здесь ничего не надо делать.
Стили для тёмного режима (dark mode)
Тёмный режим – это функциональный запрос, который нужно создать для поддержки стилей. Здесь не будет примера, а только рекомендации. Достаточно выбрать цвет фона и цвет шрифта и не писать все новые стили с нуля.
Следует наследовать цвет текста и фон (или сделать его прозрачным) и выбрать цвет рамки, который по-прежнему соответствует требованиям контрастности. Стили состояния при фокусировке тоже нуждаются в достаточном контрасте. Метка для состояния при ошибке зависит от фонового градиента к белому, поэтому нужно будет полностью переопределить стили ошибок, в том числе для RTL. Отключенные ( disabled ) поля также потребуют некоторой работы, так как явно заданы цвета границ и текста.
Заключение
Пример стилизованного select в разных состояниях с сохранением WCAG-доступности.
Когда речь идет о стилизации полей формы, нужно обратить внимание на минимальный набор стилей, который понадобится, чтобы обеспечить соответствие общему дизайну и поддержку состояний, которые перечислены выше.
Похожие публикации, посвященные стилизации HTML-элемента select : Select Like It’s 2019 и Custom Select Styles with Pure CSS немного отличаются подходами, но заслуживают не меньшего внимания. Может быть эти варианты даже лучше соответствуют вашим целям и требованиям.