Как изменить стиль select css

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

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

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

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

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

select {
  font: inherit;
  letter-spacing: inherit;
  word-spacing: inherit;
}

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.

Пример

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

See this code Простой Select on x.xhtml.ru.

Как настроить стрелку для 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 {
  display: none;
}

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

See this code Select с измененной стрелкой on x.xhtml.ru.

Этот пример демонстрирует замену стрелки по умолчанию элементу 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 {
  outline: 0.15em solid #00f;
  box-shadow: 0 0 0.2em #00f;
}

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

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

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

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

select[required] {
  border-left-width: 0.3em;
}

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

Одной красной рамки тут будет недостаточно (из-за сбоев 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-доступности.

See this code Select Menus on x.xhtml.ru.

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

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

Under-Engineered Select Menus.

От автора: современный CSS предоставляет нам ряд свойств для создания пользовательских стилей элемента select, которые имеют почти идентичный начальный вид для одиночных, множественных и отключенных элементов select в популярных браузерах.

Несколько свойств и методов, которые будет использовать наше решение:

Распространенные проблемы с нативным select

Как и для всех типов полей формы, у select первоначальный вид в разных браузерах различается. Слева направо, вот исходный вид select в Firefox, Chrome и Safari:

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

Примечание. Раскрывающийся список по-прежнему не стилизован, поэтому после select он все равно подберет для этого варианта список стилей отдельных браузеров . Это нормально — мы можем справиться с этим, чтобы сохранить доступность нативного select!

Базовый HTML

Для начала мы сосредоточимся на одиночном select.

Метка не является частью нашего упражнения, но включена в общем требовании, в частности, с атрибутом for, имеющим значение свойства id для select.

Чтобы реализовать наши пользовательские стили, мы для простоты в этом руководстве заключили пользовательский select в дополнительный div с классом select.

Сбросить и удалить унаследованные стили

Как и во всех моих руководствах в качестве передовой современной практики, мы сначала добавляем следующий сброс:

После этого мы можем начать правило для нативного select и применить следующее к его внешнему виду:

Хотя большинство из этих стилей вам, вероятно, знакомы, странность заключается в appearance. Это редко используемое свойство, и вы заметите, что это не совсем то место, где мы хотели бы его поддерживать, но в этом случае оно в первую очередь обеспечивает нам удаление стрелки раскрывающегося списка.

Примечание: CodePen настроен на использование автопрефикса, который добавит необходимые предварительно фиксированные версии свойства appearance. Возможно, вам придется специально настроить это для своего проекта или добавить их вручную. Мой HTML / Sass Jumpstart включает автопрефиксатор, как часть производственной сборки.

Хорошая новость в том, что мы можем добавить еще одно правило, чтобы убрать стрелку для более ранних версий IE, если вам это нужно:

Последняя часть — удалить значение по умолчанию outline. Не волнуйтесь — позже мы добавим ему замену для состояния :focus!

А вот гифка нашего прогресса. Вы можете видеть, что теперь нет визуальной индикации того, что это select до того, как кликнуть по нему:

Пользовательские стили поля выбора

Сначала давайте настроим некоторые переменные CSS. Это позволит гибко перекрашивать наш select, чтобы отображать состояние ошибки.

Примечание для специальных возможностей: как элемент пользовательского интерфейса выделенная граница должна иметь контраст 3:1 или выше по сравнению с цветом окружающего пространства.

Теперь пришло время создать стили select, которые мы применим к нашей оболочке div.select:

Сначала мы устанавливаем некоторые ограничения по ширине. Значения min-width и max-width в основном предназначены для этой демонстрации, и вы можете отказаться от них или изменить их для своего варианта использования.

Затем мы применяем некоторые свойства блочной модели, в том числе border, border-radius и padding. Обратите внимание на использование единицы em, которая будет сохранять эти свойства пропорциональными набору font-size.

В сбросе стилей, мы установили для нескольких свойств inherit, так что здесь мы определяем их, в том числе font-size, cursor и line-height.

Наконец, мы предоставляем свойства фона, включая градиент для малейшего размера. Если вы удалите свойства фона, выделение станет прозрачным и сохранит фон страницы. Это может быть желательно, однако помните о влияние на контраст и проверяйте его. И вот наш прогресс:

Пользовательская стрелка раскрывающегося списка выбора

Для нашей стрелки раскрывающегося списка, мы будем использовать одно из самых интересных современных свойств CSS: clip-path.

Обрезка контуров позволяет нам создавать всевозможные формы, «обрезая» квадратные и прямоугольные фигуры, которые мы получаем по умолчанию от большинства элементов. Я получил удовольствие от использования clip-path при моем недавнем редизайне сайта-портфолио.

До получения лучшей поддержки clip-path альтернативные методы включали:

SVG может показаться оптимальным решением, однако при использовании в background-image в качестве иконки он теряет способность действовать как иконка в том смысле, что не может изменять свои свойства, такие как цвет заливки, без его полного переопределения. Это означает, что мы не можем использовать переменную CSS.

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

С помощью clip-path мы получаем четкую, масштабируемую «графику» стрелки, которая выглядит как SVG, но с преимуществами возможности использовать пользовательскую переменную и определения через стили вместо разметки HTML. Чтобы создать стрелку, мы определим ее как псевдо-элемент ::after.

Если вы следите по тексту, возможно, вы заметили, что стрелка не отображается, несмотря на определение width и height. При осмотре было обнаружено, что для ::after ширина на самом деле не разрешена. Мы решим эту проблему, обновив .select макетом сетки CSS.

Это позволяет стрелке отображаться.

На этом этапе мы можем видеть, что у нас действительно есть треугольник. Чтобы исправить выравнивание, мы воспользуемся моим любимым приемом CSS-сетки. Старое решение CSS: position: absolute. Новое решение CSS: единая grid-template-areas, содержащая их все.

Сначала мы определим область, а затем определим, что и select, и ::after используют ее. Имя привязано к элементу, для которого он создан, и мы упростим все, назвав его «select»:

Это дает нам перекрытие стрелкой пользовательского select из-за контекста стекирования:

Теперь мы можем использовать свойства сетки для завершения выравнивания каждого элемента:

Состояние :focus

Ах да — помните, как мы удалили outline? Нам нужно исправить отсутствующее состояние :focus. В ближайшее время мы могли бы использовать свойство :focus-within, но все же на данный момент лучше включить для него полифилл.

В этом руководстве мы будем использовать альтернативный метод, который дает тот же результат, только немного посложнее. К сожалению, это означает, что нам нужно добавить в DOM еще один элемент. После пользовательского элемента select в качестве последнего дочернего элемента внутри .select добавьте:

Почему после? Поскольку, это решение на чистом CSS, размещение его после пользовательского select означает, что мы можем изменить его, когда select выделен фокусом, используя селектор — +. Это позволяет нам создать следующее правило:

Вам может быть интересно, почему мы вернулись к position: absolute после того, как только что изучили прием grid-area. Причина в том, что мы хотим избежать пересчета корректировок на основе заполнения. Если вы попробуете это самостоятельно, то увидите, что даже указание для width и height 100% все равно заставляет его находиться внутри отступа.

position: absolute работает лучше. Мы растягиваем лишний пиксель в каждом направлении, чтобы убедиться, что он перекрывает границу.

Но нам нужно сделать еще одно добавление, чтобы обеспечить, что .select связано с нашим select… ну, через position: relative.

И вот как отображается в Chrome наш пользовательский select:

Множественный выбор

Элемент выбора имеет второй вариант, который позволяет пользователю выбрать более одной опции. С точки зрения HTML это просто означает добавление атрибута multiple, но мы также добавим класс, который поможет создавать настройки стиля, select—multiple:

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

Это можно быстро исправить. Мы используем :not(), чтобы исключить наш недавно определенный класс:

У нас есть пара незначительных корректировок для множественного выбора, первая — это удаление отступов, которые были добавлены ранее, чтобы освободить место для стрелки:

По умолчанию опции с длинным значением будут выходить за пределы видимой области и будут обрезаны, но я обнаружил, что основные браузеры позволяют переопределить перенос, если вы хотите:

Опционально мы можем установить для select свойство height, чтобы обеспечить более надежное кроссбраузерное поведение. В ходе тестирования я узнал, что Chrome и Firefox отображают опцию частично, но Safari полностью скроет опцию, которая не может быть отображена полностью.

Высота должна быть установлена непосредственно для пользовательского select. Учитывая другие стили, значение 6rem должно подойти для отображения 3 опций:

На данный момент, из-за текущей поддержки браузеров, мы внесли столько корректировок, сколько смогли. Состояние :selected из options довольно хорошо настраивается в Chrome, частично в Firefox, и совсем не настраивается в Safari.

Стили :disabled

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

Чтобы выделить отключенное состояние, нам нужно применить серый фон. Но поскольку мы установили стили фона .select, и селектора :parent нет, нам нужно создать последний класс для обработки этого состояния:

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

Демо

Вы можете проверить это сами, но вот предварительный просмотр полного решения (слева направо) в Firefox, Chrome и Safari:

Автор: Stephanie Eckles

Источник: //moderncss.dev

Редакция: Команда webformyself.

Here are three solutions:

Solution #1 — appearance: none — with Internet Explorer 10 — 11 workaround (Demo)

—

To hide the default arrow set appearance: none on the select element, then add your own custom arrow with background-image

select {
   -webkit-appearance: none;
   -moz-appearance: none;
   appearance: none;       /* Remove default arrow */
   background-image: url(...);   /* Add custom arrow */
}

Browser Support:

appearance: none has very good browser support (caniuse) — except for Internet Explorer.

We can improve this technique and add support for Internet Explorer 10 and Internet Explorer 11 by adding

select::-ms-expand {
    display: none; /* Hide the default arrow in Internet Explorer 10 and Internet Explorer 11 */
}

If Internet Explorer 9 is a concern, we have no way of removing the default arrow (which would mean that we would now have two arrows), but, we could use a funky Internet Explorer 9 selector.

To at least undo our custom arrow — leaving the default select arrow intact.

/* Target Internet Explorer 9 to undo the custom arrow */
@media screen and (min-width:0) {
    select {
        background-image:none9;
        padding: 5px9;
    }
}

All together:

This solution is easy and has good browser support — it should generally suffice.

If browser support for Internet Explorer is needed, read ahead.

Solution #2 Truncate the select element to hide the default arrow (demo)

—

(Read more here)

Wrap the select element in a div with a fixed width and overflow:hidden.

Then give the select element a width of about 20 pixels greater than the div.

The result is that the default drop-down arrow of the select element will be hidden (due to the overflow:hidden on the container), and you can place any background image you want on the right-hand-side of the div.

The advantage of this approach is that it is cross-browser (Internet Explorer 8 and later, WebKit, and Gecko). However, the disadvantage of this approach is that the options drop-down juts out on the right-hand-side (by the 20 pixels which we hid… because the option elements take the width of the select element).

[It should be noted, however, that if the custom select element is necessary only for mobile devices — then the above problem doesn’t apply — because of the way each phone natively opens the select element. So for mobile, this may be the best solution.]

If the custom arrow is necessary on Firefox — prior to Version 35 — but you don’t need to support old versions of Internet Explorer — then keep reading…

Solution #3 — Use the pointer-events property (demo)

—

(Read more here)

The idea here is to overlay an element over the native drop down arrow (to create our custom one) and then disallow pointer events on it.

Advantage: It works well in WebKit and Gecko. It looks good too (no jutting out option elements).

Disadvantage: Internet Explorer (Internet Explorer 10 and down) doesn’t support pointer-events, which means you can’t click the custom arrow. Also, another (obvious) disadvantage with this method is that you can’t target your new arrow image with a hover effect or hand cursor, because we have just disabled pointer events on them!

However, with this method you can use Modernizer or conditional comments to make Internet Explorer revert to the standard built in arrow.

NB: Being that Internet Explorer 10 doesn’t support conditional comments anymore: If you want to use this approach, you should probably use Modernizr. However, it is still possible to exclude the pointer-events CSS from Internet Explorer 10 with a CSS hack described here.

Время прочтения
6 мин

Просмотры 66K

Стилизация некоторых стандартных элементов — довольно нетривиальная задача.

Разумеется, хороший специалист может стилизовать что угодно, однако всё упирается в сложность этого действия.

Для стилизации радиокнопок и чекбоксов потребуется совсем немного времени — идея стилизации label со скрытыми input не нова, и давно и повсеместно используется.

Для стилизации остального — есть JavaScript.

Сегодня я хочу рассказать Вам о том, как можно относительно просто стилизовать выпадающие списки, с минимальным кодом JavaScript (от 0 до 26 строк) и минимальной дополнительной разметкой HTML.

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

И вот, когда я уже почти закончил писать очередную жуткую конструкцию, призванную заменить несчастный Select, у меня возник вопрос:

А зачем?

Обычно этот вопрос ведёт к умудрённой прокрастинации, переосмыслению жизни и т.д., но в этот раз что-то пошло не так, и я понял, что вопрос и правда был хорошим, а главное — полезным.

Небольшой ликбез:

Итак, для тех, кто в танке, а также тех, кому выпадающие списки доставили столько боли, что они решили забыть о них, как о страшном сне, я немножко (правда) напомню о том, что это такое.

Выпадающие списки состоят из 2 основных элементов:

1. Select — контейнер для всего списка
2. Option — элемент списка

Иногда используется ещё и OptGroup (группа элементов списка), но его реализация пока что остаётся на JavaScript’е.

Основной функционал выпадающего списка — отправка информации о выбранном(ых) пункте(ах) на сервер.

Для полноты картины, вот список атрибутов элементов (чтобы можно было оценить, сколько из них будут реализованы):

1. Select — disabled, form, multiple, name, required, size
2. Option — disabled, label, selected, value

На этом, пожалуй, закончим с описанием, и перейдём к реализации.

Уже было написано немало слов, поэтому — ближе к коду:

<form>
  <div class="content">
    <h3 class="title">Описание 0 пункта</h3>

    <input id="selectName0" type="radio" value="0" name="selectName" />
    <label for="selectName0">Описание 0 пункта</label>
    <input id="selectName1" type="radio" value="1" name="selectName" />
    <label for="selectName1">Описание 1 пункта</label>
    <input id="selectName2" type="radio" value="2" name="selectName" />
    <label for="selectName2">Описание 2 пункта</label>
  </div>
</form>

Итак, чем же хорош этот код? (всё, без чего можно обойтись при объяснении, убрано специально)

Давайте отметим, какие пункты из функционала Select и Option автоматически стали возможны, за счёт использования input + label:

1. Select — form, name, required
2. Option — disabled, label, selected, value

И вот всё, что остаётся реализовать:

1. Select — disabled, multiple, size
2. Option — полностью реализовано

Всего лишь добавлением связок input + label, мы сократили список необходимого функционала с 10 пунктов до 3. Неплохо, но ведь это не конец, верно?

Чтобы реализовать пункт Select.multiple (множественный выбор) — достаточно сделать так:

<form>
  <div class="content">
    <input id="selectName0" type="checkbox" value="0" name="selectName" />
    <label for="selectName0">Описание 0 пункта</label>
    <input id="selectName1" type="checkbox" value="1" name="selectName" />
    <label for="selectName1">Описание 1 пункта</label>
    <input id="selectName2" type="checkbox" value="2" name="selectName" />
    <label for="selectName2">Описание 2 пункта</label>
  </div>
</form>

Мы всего-навсего меняем тип input’ов с Radio на Checkbox, и получаем практически полный аналог multiple.

Разница в том, что для множественного выбора не нужно зажимать ctrl (ну а если кто-то хочет полностью имитировать функционал — JavaScript в помощь).

Что осталось?

1. Select — disabled, size
2. Option — полностью реализовано

Ну что ж, и Select.disabled и Select.size предельно просто реализуются с помощью CSS:

• Select.size — какой зададите размер, такой и будет. Необходимо будет просто добавить контейнер.
• Select.disabled — для контейнера нужно добавить pointer-events: none, чтобы отменить реакцию на любые действия пользователя (наведение, клики и т.д.), ну и можно сделать его чуть прозрачным.

Итак, основной функционал есть. Чего не хватает?

Нужно также добавить автозаполнение заголовка для выпадающего меню с единственным выбором, а также возникнет проблема при сбросе формы (кнопка Reset), т.к. заголовок не сбросится. Но и это — вполне решаемо (с помощью JavaScript).

А теперь — примеры:

Немного реализации (выпадающее меню с единичным выбором):

И ещё немного (не выпадающее меню с множественным выбором):

Бонус: не знаю, зачем я это сделал, но… выпадающее меню с единичным выбором и работающим на CSS сбросом заголовка:

Зачем это нужно?

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

При стилизации выпадающих списков вида:

<select>
  <option>Пункт 1</option>
  <option>Пункт 2</option>
</select>

есть серьёзные ограничения стилизации. Поэтому их заменяют на простые списки:

<ul>
  <li>Пункт 1</li>
  <li>Пункт 2</li>
</ul>

которым с помощью 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> для всех браузеров.

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

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

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

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

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</title>
    <style>
      .box {
      width: 120px;
      height: 30px;
      border: 1px solid #999;
      font-size: 18px;
      color: #1c87c9;
      background-color: #eee;
      border-radius: 5px;
      box-shadow: 4px 4px #ccc;
      }
    </style>
  </head>
  <body>
    <p>Обычный блок выбора:</p>
    <select>
      <option>Кофе</option>
      <option>Чай</option>
      <option>Вода</option>
      <option selected>Коктейль</option>
    </select>
    <p>Оформленный блок выбора:</p>
    <select class="box">
      <option>Кофе</option>
      <option>Чай</option>
      <option>Вода</option>
      <option selected>Коктейль</option>
    </select>
  </body>
</html>

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

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

Заметьте, что свойство appearance все еще считается экспериментальным, и вам потребуется использовать префикс -moz- (для Firefox) и -webkit- (для Chrome, Safari, Opera) для максимальной совместимости браузера.

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</title>
    <style>
      select {
      width: 140px;
      height: 35px;
      padding: 5px 35px 5px 5px;
      font-size: 18px;
      border: 2px solid #ccc;
      -webkit-appearance: none;
      -moz-appearance: none;
      appearance: none;
      background: url("/uploads/media/default/0001/02/f7b4d3d2ba3fe1d8518e6e63d7740e1e73921abf.png") 96% / 15% no-repeat #eee;
      }
      select::-ms-expand { 
      display: none; /* удалите стрелку по умолчанию в IE 10 и 11 */
      }
    </style>
  </head>
  <body>
    <select>
      <option>Кофе</option>
      <option>Чай</option>
      <option>Вода</option>
      <option selected>Коктейль</option>
    </select>
  </body>
</html>

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

Можно использовать этот метод, так как все браузеры эффективно поддерживают overflow: hidden.

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

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</title>
    <style>
      .mystyle select {
      background: transparent;
      width: 140px;
      height: 35px;
      border: 1px solid #ccc;
      font-size: 18px;
      } 
      .mystyle {
      width: 120px;
      height: 34px;
      border: 1px solid #111;
      border-radius: 3px;
      overflow: hidden;
      background: url("/uploads/media/default/0001/02/f7b4d3d2ba3fe1d8518e6e63d7740e1e73921abf.png") 96% / 20% no-repeat #ddd;
      }
    </style>
  </head>
  <body>
    <div class="mystyle">
      <select>
        <option>Кофе</option>
        <option>Чай</option>
        <option>Вода</option>
        <option selected>Коктейль</option>
      </select>
    </div>
  </body>
</html>

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

Этот метод работает отлично и хорошо поддерживается браузерами.

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</title>
    <style>
      .mybox {
      position: relative;
      display: inline-block;
      }
      select {
      display: inline-block;
      height: 30px;
      width: 150px;
      outline: none;
      color: #74646e;
      border: 1px solid #ccc;
      border-radius: 5px;
      box-shadow: 1px 1px 2px #999;
      background: #eee;
      }
      /* Select arrow styling */
      .mybox .myarrow{
      width: 23px;
      height: 28px;
      position: absolute;
      display: inline-block;
      top: 1px;
      right: 3px;
      background: url("/uploads/media/default/0001/02/f7b4d3d2ba3fe1d8518e6e63d7740e1e73921abf.png") right / 90% no-repeat #eee;
      pointer-events: none;
      }
    </style>
  </head>
  <body>
    <div class="mybox">
      <span class="myarrow"></span>
      <select>
        <option>Кофе</option>
        <option>Чай</option>
        <option>Вода</option>
        <option selected>Коктейль</option>
      </select>
    </div>
  </body>
</html>

4) Используйте знаки препинания вместо стрелок раскрывающегося списка

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

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

Здесь блок <select> находится внутри элемента <label>. Таким образом, мы сможем установить для него курсор, даже если свойство pointer-events установлено в «none».

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</title>
    <style>
      select {
      width: 140px;
      height: 35px;
      padding: 4px;
      border-radius:4px;
      box-shadow: 2px 2px 8px #999;
      background: #eee;
      border: none;
      outline: none;
      display: inline-block;
      -webkit-appearance:none;
      -moz-appearance: none;
      appearance: none;
      cursor: pointer;
      }
      label {
      position: relative;
      }
      label:after {
      content:'<>';
      font: 11px "Consolas", monospace;
      color: #666;
      -webkit-transform: rotate(90deg);
      -moz-transform: rotate(90deg);
      -ms-transform: rotate(90deg);
      transform: rotate(90deg);
      right: 8px; 
      top:2px;
      padding: 0 0 2px;
      border-bottom: 1px solid #ddd;
      position: absolute;
      pointer-events: none;
      }
      label:before {
      content: '';
      right: 6px; 
      top:0px;
      width: 20px; 
      height: 20px;
      background: #eee;
      position: absolute;
      pointer-events: none;
      display: block;
      }
    </style>
  </head>
  <body>
    <label>
      <select>
        <option>Кофе</option>
        <option>Чай</option>
        <option>Вода</option>
        <option selected>Коктейль</option>
      </select>
    </label>
  </body>
</html>

HTML CSS JS

Стилизация select

Дата размещения статьи 17/11/2018 👁20641