Стилизация элементов формы¶

Узнайте, как реализовать элементы управления формами с помощью CSS.

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

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

Элемент <select>¶

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

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

 1
 2
 3
 4
 5
 6
 7
 8
 9
10

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

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

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

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

В этом можно убедиться на примере следующей демонстрации из Styling a Select Like It's 2019

Что касается элемента <option>? Элемент <option> - это так называемый замененный элемент, представление которого находится за пределами CSS. На данный момент стилизация элемента <option> невозможна.

Чекбоксы и радиокнопки¶

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

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

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

Сначала визуально скройте стандартные флажок и радиокнопку.

1
2
3
4
5

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

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

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

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13

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.

1
2
3

checkbox {
    accent-color: orange;
}

Ресурсы¶

• Accent color
• Стилизация элемента <select>
• Доступность элементов управления стилизованных форм
• Open UI

Источник — Styling form controls

Комментарии