От создателя: современный CSS предоставляет нам ряд параметров для сотворения пользовательских стилей элемента select, которые имеют практически схожий исходный вид для одиночных, множественных и отключенных элементов select в фаворитных браузерах.
Несколько параметров и способов, которые будет употреблять наше решение:
clip-path для сотворения настраиваемой стрелки раскрывающегося перечня
макет сетки CSS для сглаживания пользовательского поля выбора и стрелки
пользовательские переменные CSS для гибкого стиля
единицы em для относительных размеров
Всераспространенные трудности с нативным select
Как и для всех типов полей формы, у select начальный вид в различных браузерах различается. Слева вправо, вот начальный вид select в Firefox, Chrome и Safari:
Различия содержат в себе размер поля, размер шрифта, высоту строчки, и более выдающейся является разница в стиле раскрывающегося индикатора. Наша цель — сделать в этих браузерах однообразный начальный вид, включая множественный выбор и отключенные состояния.
Примечание. Раскрывающийся перечень как и раньше не стилизован, потому опосля select он все равно подберет для этого варианта перечень стилей отдельных браузеров . Это нормально — мы можем совладать с сиим, чтоб сохранить доступность нативного select!
Базисный HTML
Для начала мы сосредоточимся на одиночном select.
Standard Select Option 1 Option 2 Option 3 Option 4 Option 5 Option that has too long of a value to fit
| 1234567891011 | Standard Select Option 1 Option 2 Option 3 Option 4 Option 5 Option that has too long of a value to fit |
Метка не является частью нашего упражнения, но включена в общем требовании, а именно, с атрибутом for, имеющим значение характеристики id для select.
Чтоб воплотить наши пользовательские стили, мы для простоты в этом руководстве заключили пользовательский select в доп div с классом select.
Сбросить и удалить унаследованные стили
Как и во всех моих руководствах в качестве передовой современной практики, мы поначалу добавляем последующий сброс:
CSS *, *::before, *::after { box-sizing: border-box;
}
| 12345 | *,*::before,*::after { box-sizing: border-box;} |
Опосля этого мы можем начать правило для нативного select и применить последующее к его наружному виду:
CSS select { // 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;
}
| 1234567891011121314 | select { // 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 включает автопрефиксатор, как часть производственной сборки.
WorpdRess спасет от закрытия поисковик по картинкам СС Search
Отменная новость в том, что мы можем добавить очередное правило, чтоб убрать стрелку для наиболее ранешних версий IE, если для вас это необходимо:
CSS select::-ms-expand { display: none;
}
| 123 | select::-ms-expand { display: none;} |
Крайняя часть — удалить значение по дефлоту outline. Не беспокойтесь — позднее мы добавим ему подмену для состояния :focus!
CSS select { // …existing styles
outline: none;
| 123 | select { // …existing styles outline: none; |
А вот гифка нашего прогресса. Вы сможете созидать, что сейчас нет зрительной индикации того, что это select до того, как кликнуть по нему:
Пользовательские стили поля выбора
Поначалу давайте настроим некие переменные CSS. Это дозволит гибко перекрашивать наш select, чтоб показывать состояние ошибки.
CSS :root { —select-border: #777; —select-focus: blue; —select-arrow: var(—select-border);
}
| 12345 | :root { —select-border: #777; —select-focus: blue; —select-arrow: var(—select-border);} |
Примечание для особых способностей: как элемент пользовательского интерфейса выделенная граница обязана иметь контраст 3:1 либо выше по сопоставлению с цветом окружающего места.
Сейчас настало время сделать стили select, которые мы применим к нашей оболочке div.select:
CSS .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%);
}
| 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.
В конце концов, мы предоставляем характеристики фона, включая градиент для мельчайшего размера. Если вы удалите характеристики фона, выделение станет прозрачным и сохранит фон странички. Это быть может лучше, но помните о воздействие на контраст и инспектируйте его. И вот наш прогресс:
Пользовательская стрелка раскрывающегося перечня выбора
Для нашей стрелки раскрывающегося перечня, мы будем употреблять одно из самых увлекательных современных параметров CSS: clip-path.
Обрезка контуров дозволяет нам создавать различные формы, «обрезая» квадратные и прямоугольные фигуры, которые мы получаем по дефлоту от большинства элементов. Я получил наслаждение от использования clip-path при моем недавнешнем редизайне сайта-портфолио.
До получения наилучшей поддержки clip-path другие способы включали:
background-image — обычно в формате PNG, наиболее современным будет SVG
интегрированный SVG как доп элемент
трюк границы, чтоб сделать треугольник
SVG может показаться хорошим решением, но при использовании в background-image в качестве иконки он теряет способность действовать как иконка в том смысле, что не может изменять свои характеристики, такие как цвет заливки, без его полного переопределения. Это значит, что мы не можем употреблять переменную CSS.
Размещение встроенного SVG-файла решает делему с цветом, но это значит добавление еще 1-го элемента всякий раз, когда определяется select.
Вебмастера заметили исчезновение эмодзи из расширенных сниппетов Google
При помощи clip-path мы получаем четкую, масштабируемую «графику» стрелки, которая смотрится как SVG, но с преимуществами способности употреблять пользовательскую переменную и определения через стили заместо разметки HTML. Чтоб сделать стрелку, мы определим ее как псевдо-элемент ::after.
CSS .select::after { content: «»; width: 0.8em; height: 0.5em; background-color: var(—select-arrow); clip-path: polygon(100% 0%, 0 0%, 50% 100%);
}
| 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 .select { // …existing styles display: grid;
}
| 1234 | .select { // …existing styles display: grid;} |
Это дозволяет стрелке отображаться.
На этом шаге мы можем созидать, что у нас вправду есть треугольник. Чтоб поправить сглаживание, мы воспользуемся моим возлюбленным приемом CSS-сетки. Старенькое решение CSS: position: absolute. Новое решение CSS: единая grid-template-areas, содержащая их все.
Поначалу мы определим область, а потом определим, что и select, и ::after употребляют ее. Имя привязано к элементу, для которого он сотворен, и мы упростим все, назвав его «select»:
CSS .select { // …existing styles grid-template-areas: «select»;
}
select, .select:after { grid-area: select;
}
| 123456789 | .select { // …existing styles grid-template-areas: «select»;} select,.select:after { grid-area: select;} |
Это дает нам перекрытие стрелкой пользовательского select из-за контекста стекирования:
Сейчас мы можем употреблять характеристики сетки для окончания сглаживания всякого элемента:
CSS .select { // …existing styles align-items: center;
}
.select:after { // …existing styles justify-self: end;
}
| 123456789 | .select { // …existing styles align-items: center;} .select:after { // …existing styles justify-self: end;} |
Состояние :focus
Ах да — помните, как мы удалили outline? Нам необходимо поправить отсутствующее состояние :focus. В наиблежайшее время мы могли бы употреблять свойство :focus-within, но все таки на данный момент лучше включить для него полифилл.
В этом руководстве мы будем употреблять другой способ, который дает этот же итог, лишь мало посложнее. К огорчению, это значит, что нам необходимо добавить в DOM очередной элемент. Опосля пользовательского элемента select в качестве крайнего дочернего элемента снутри .select добавьте:
| 1 |
Почему опосля? Так как, это решение на чистом CSS, размещение его опосля пользовательского select значит, что мы можем поменять его, когда select выделен фокусом, используя селектор — +. Это дозволяет нам сделать последующее правило:
CSS select:focus + .focus { position: absolute; top: -1px; left: -1px; right: -1px; bottom: -1px; border: 2px solid var(—select-focus); border-radius: inherit;
}
| 123456789 | select: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.
Определение стилей контейнера макетов в CSS
CSS .select { // …existing styles
position: relative;
| 123 | .select { // …existing styles position: relative; |
И ах так отображается в Chrome наш пользовательский select:
Множественный выбор
Элемент выбора имеет 2-ой вариант, который дозволяет юзеру избрать наиболее одной функции. Исходя из убеждений HTML это просто значит добавление атрибута multiple, но мы также добавим класс, который поможет создавать опции стиля, select—multiple:
Multiple Select Option 1 Option 2 Option 3 Option 4 Option 5 Option that has too long of a value to fit
| 123456789101112 | Multiple Select Option 1 Option 2 Option 3 Option 4 Option 5 Option that has too long of a value to fit |
И смотря на него, мы лицезреем, что он унаследовал большая часть наших стилей, кроме того, что нам не нужна стрелка в этом представлении.
Это можно стремительно поправить. Мы используем :not(), чтоб исключить наш не так давно определенный класс:
CSS .select:not(.select—multiple)::after
| 1 | .select:not(.select—multiple)::after |
У нас есть пара незначимых корректировок для множественного выбора, 1-ая — это удаление отступов, которые были добавлены ранее, чтоб высвободить пространство для стрелки:
CSS select[multiple] { padding-right: 0;
}
| 123 | select[multiple] { padding-right: 0;} |
По дефлоту функции с длинноватым значением будут выходить за границы видимой области и будут обрезаны, но я нашел, что главные браузеры разрешают переопределить перенос, если вы желаете:
CSS select[multiple] option { white-space: normal;
}
| 123 | select[multiple] option { white-space: normal;} |
Опционально мы можем установить для select свойство height, чтоб обеспечить наиболее надежное кроссбраузерное поведение. В процессе тестирования я вызнал, что Chrome и Firefox показывают опцию отчасти, но Safari вполне скроет опцию, которая не быть может отображена вполне.
Высота обязана быть установлена конкретно для пользовательского select. Беря во внимание остальные стили, значение 6rem обязано подойти для отображения 3 опций:
CSS select[multiple] { // …existing styles height: 6rem;
}
| 1234 | select[multiple] { // …existing styles height: 6rem;} |
Сейчас, из-за текущей поддержки браузеров, мы занесли столько корректировок, сколько смогли. Состояние :selected из options достаточно отлично настраивается в Chrome, отчасти в Firefox, и совершенно не настраивается в Safari.
Стили :disabled
Хотя я бы выступала за то, чтоб просто не показывать отключенные элементы управления, мы должны приготовить стили для этого состояния, чтоб охватить все.
Чтоб выделить отключенное состояние, нам необходимо применить сероватый фон. Но так как мы установили стили фона .select, и селектора :parent нет, нам необходимо сделать крайний класс для обработки этого состояния:
CSS .select—disabled { cursor: not-allowed; background-color: #eee; background-image: linear-gradient(to top, #ddd, #eee 33%);
}
| 12345 | .select—disabled { cursor: not-allowed; background-color: #eee; background-image: linear-gradient(to top, #ddd, #eee 33%);} |
Тут мы обновили курсор как доп подсказку о том, что с полем недозволено вести взаимодействие, и обновили значения для фона, которые мы ранее установили, как белоснежный, сейчас они наиболее сероватые для отключенного состояния. Это дает нам:
Демо
Вы сможете проверить это сами, но вот подготовительный просмотр полного решения (слева вправо) в Firefox, Chrome и Safari:
Создатель: Stephanie Eckles
Редакция: Команда webformyself.
Источник
Вам также может понравиться