Стилизация элементов управления формой

В этом модуле вы узнаете, как стилизовать элементы управления формами и как согласовать их со стилями других сайтов.

Помогите пользователям выбрать вариант

Элемент <select>

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

Для начала изменим стрелки.

select {
    -moz-appearance: none;
    -webkit-appearance: none;
    appearance: none;
    background-color: #fff;
    background-image: url(arrow.png);
    background-repeat: no-repeat;
    background-position: right .7em top 50%, 0 0;
    background-size: .65em auto;
}

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

Вам также следует изменить font-size как минимум на 1rem (который для большинства браузеров имеет значение по умолчанию 16 пикселей) для вашего элемента <select> . Это предотвратит масштабирование страницы в iOS Safari, когда элемент управления формой находится в фокусе.

Конечно, вы также можете изменить цвета элементов, чтобы они соответствовали цветам вашего бренда. После добавления еще нескольких стилей для пробелов, :hover и :focus внешний вид элемента <select> теперь единообразен в разных браузерах.

Посмотрите это в следующей демонстрации из журнала «Стилизация избранного, как будто это 2019».

А как насчет элемента <option> ? Элемент <option> — это так называемый заменяемый элемент , представление которого выходит за рамки CSS. На момент написания этой статьи вы не могли стилизовать элемент <option> .

Флажки и радиокнопки

Внешний вид <input type="checkbox"> и <input type="radio"> различается в разных браузерах.

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

Раньше разработчики не могли напрямую стилизовать элементы управления <input type="checkbox"> и <input type="radio"> . Флажки и переключатели теперь можно стилизовать с помощью их псевдоэлементов . Или можно использовать следующую технику замены для создания собственных стилей для этих элементов.

Во-первых, визуально скройте флажок и переключатель по умолчанию.

input[type="radio"],
input[type="checkbox"] {
   position: absolute;
   opacity: 0;
}

Важно использовать position: absolute в сочетании с opacity: 0 вместо display: none или visibility: hidden , чтобы элементы управления были скрыты только визуально. Это гарантирует, что они по-прежнему будут отображаться в дереве доступности браузера. Обратите внимание, что может потребоваться дальнейшее оформление, чтобы гарантировать, что визуально скрытые элементы управления формы остаются расположенными «поверх» заменяющих их элементов. Это поможет гарантировать, что при наведении курсора на один из этих элементов, когда включена программа чтения с экрана или при использовании сенсорных устройств с включенной функцией чтения с экрана, визуально скрытые элементы управления будут обнаруживаться при просмотре касанием, а видимый индикатор фокуса программы чтения с экрана будет отображаться. обычно появляются в том месте, где элементы управления отображаются на экране.

Чтобы отобразить собственные флажки и переключатели, у вас есть разные варианты. Вы используете псевдоэлемент CSS ::before и свойство CSS background или используете встроенные изображения SVG.

input[type="radio"] + label::before {
  content: "";
  width: 1em;
  height: 1em;
  border: 1px solid black;
  display: inline-block;
  border-radius: 50%;
  margin-inline-end: 0.5em;
}

input[type="radio"]:checked + label::before {
  background: black;
}

CSS предоставляет множество возможностей для обеспечения соответствия флажков и переключателей стилю вашего бренда.

Узнайте больше о стилях <input type="checkbox"> и <input type="radio"> и пользовательских стилях флажков .

Как использовать цвета вашего сайта для элементов управления формами

Хотите объединить стили вашего сайта в элементы управления с помощью одной строки кода? Для этого вы можете использовать свойство CSS accent-color .

checkbox {
  accent-color: orange;
}

Проверьте свое понимание

Проверьте свои знания по стилизации элементов управления формами.

Как удалить собственный стиль элементов управления формы?

Использование appearance: none; .
Использование revert: appearance; .
Использование appearance: revert; .
Использование revert: all; .

Ресурсы