Пользовательские стили элементов select на CSS

Пользовательские стили элементов select на CSS Сайтостроение

Пользовательские стили элементов select на CSS

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

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

clip-path для сотворения настраиваемой стрелки раскрывающегося перечня

макет сетки CSS для сглаживания пользовательского поля выбора и стрелки

пользовательские переменные CSS для гибкого стиля

единицы em для относительных размеров

Всераспространенные трудности с нативным select

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

Пользовательские стили элементов select на CSS

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

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

Базисный HTML

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

1234567891011<label for=”standard-select”>Standard Select</label><div class=”select”>  <select id=”standard-select”>    <option value=”Option 1″>Option 1</option>    <option value=”Option 2″>Option 2</option>    <option value=”Option 3″>Option 3</option>    <option value=”Option 4″>Option 4</option>    <option value=”Option 5″>Option 5</option>    <option value=”Option length”>Option that has too long of a value to fit</option>  </select></div>

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

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

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

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

CSS

12345*,*::before,*::after {  box-sizing: border-box;}

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

CSS

1234567891011121314select {  // A reset of styles, including removing the default dropdown arrow  appearance: none;  // Additional resets for further consistency  background-color: transparent;  border: none;  padding: 0 1em 0 0;  margin: 0;  width: 100%;  font-family: inherit;  font-size: inherit;  cursor: inherit;  line-height: inherit;}

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

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

READ
Использование адаптивных модификаторов для управления изменениями компоновки в компонентах

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

CSS

123select::-ms-expand {  display: none;}

Крайняя часть — удалить значение по дефлоту outline. Не беспокойтесь — позднее мы добавим ему подмену для состояния :focus!

CSS

123select {  // …existing styles  outline: none;

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

Пользовательские стили элементов select на CSS

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

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

CSS

12345:root {  –select-border: #777;  –select-focus: blue;  –select-arrow: var(–select-border);}

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

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

CSS

12345678910111213.select {  width: 100%;  min-width: 15ch;  max-width: 30ch;  border: 1px solid var(–select-border);  border-radius: 0.25em;  padding: 0.25em 0.5em;  font-size: 1.25rem;  cursor: pointer;  line-height: 1.1;  background-color: #fff;  background-image: linear-gradient(to top, #f9f9f9, #fff 33%);}

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

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

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

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

Пользовательские стили элементов select на CSS

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

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

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

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

background-image — обычно в формате PNG, наиболее современным будет SVG

интегрированный SVG как доп элемент

трюк границы, чтоб сделать треугольник

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

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

READ
Для расчета Core Web Vitals в Search Console сайту нужен пороговый объем трафика

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

CSS

1234567.select::after {  content: “”;  width: 0.8em;  height: 0.5em;  background-color: var(–select-arrow);  clip-path: polygon(100% 0%, 0 0%, 50% 100%);}

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

CSS

1234.select {  // …existing styles  display: grid;}

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

Пользовательские стили элементов select на CSS

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

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

CSS

123456789.select {  // …existing styles  grid-template-areas: “select”;} select,.select:after {  grid-area: select;}

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

Пользовательские стили элементов select на CSS

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

CSS

123456789.select {  // …existing styles  align-items: center;} .select:after {  // …existing styles  justify-self: end;}

Пользовательские стили элементов select на CSS

Состояние :focus

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

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

1<span class=”focus”></span>

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

CSS

123456789select:focus + .focus {  position: absolute;  top: -1px;  left: -1px;  right: -1px;  bottom: -1px;  border: 2px solid var(–select-focus);  border-radius: inherit;}

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

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

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

READ
Почему лучше не размещать сайты на общем хостинге

CSS

123.select {  // …existing styles  position: relative;

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

Пользовательские стили элементов select на CSS

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

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

123456789101112<label for=”multi-select”>Multiple Select</label><div class=”select select–multiple”>  <select id=”multi-select” multiple>    <option value=”Option 1″>Option 1</option>    <option value=”Option 2″>Option 2</option>    <option value=”Option 3″>Option 3</option>    <option value=”Option 4″>Option 4</option>    <option value=”Option 5″>Option 5</option>    <option value=”Option length”>Option that has too long of a value to fit</option>  </select>  <span class=”focus”></span></div>

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

Пользовательские стили элементов select на CSS

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

CSS

1.select:not(.select–multiple)::after

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

CSS

123select[multiple] {  padding-right: 0;}

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

CSS

123select[multiple] option {  white-space: normal;}

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

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

CSS

1234select[multiple] {  // …existing styles  height: 6rem;}

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

Стили :disabled

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

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

CSS

12345.select–disabled {  cursor: not-allowed;  background-color: #eee;  background-image: linear-gradient(to top, #ddd, #eee 33%);}

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

Пользовательские стили элементов select на CSS

Демо

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

Пользовательские стили элементов select на CSS

Создатель: Stephanie Eckles

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

Источник

Оценить статью
Блог о самом интересном.
Добавить комментарий

  1. Ярослав

    Далее. Мы, скорее всего, обрабатываем пользовательские запросы, знаем, что человек авторизован и используем для него какую-то персональную информацию. Логично, что мы что-то должны получать из базы. Но не все! Есть статические вещи, которые ни для кого из пользователей не отличаются, они абсолютно одинаковые. Джеймс Аквух про это читал классный доклад «Server-Side Rendering. Сделай сам». В чем суть? Вы уже знаете, что у вас есть HTML и какой-то CSS, который абсолютно для всех пользователей одинаковый. Прежде чем ходить за любыми данными, можно генерировать выдачу из этих статических данных, сразу в потоке с сервера отправлять самое полезное. А уже после этого — ходить за данными, быстро их получать, преобразовывать в шаблоны и отдавать клиенту. И пользователь уже увидит нечто полезное.

    Ответить