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

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

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

Стилизация HTML элементов управления формами может быть непростой задачей, но все же по возможности следует использовать встроенные элементы. Такие элементы, как <input> и <button>, широко поддерживаются всеми браузерами и платформами и имеют встроенные функции, повышающие удобство использования и доступность, которые не нужно реализовывать самостоятельно. Использование вместо них <div> не дает таких преимуществ.

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

Элемент `<select>`¶

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

Можно также использовать <input> в сочетании с элементом <datalist>. Это позволяет получить комбинацию текстового поля и списка элементов <option>. Примеры использования элемента <datalist> можно посмотреть здесь.

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

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.

Для обеспечения наилучшей кроссбраузерной совместимости необходимо также включить версии appearance с префиксами: -moz-appearance и -webkit-appearance.

Подробнее о префиксах производителей.

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

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

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

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

В настоящее время существует предложение разрешить веб-разработчикам стилизовать и расширять встроенные элементы управления веб-интерфейсом, включая элементы <select> и <option>. Это позволит в будущем упростить стилизацию элементов управления формами.

Подробнее о Open UI.

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

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

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

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

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

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;
}

На данный момент только Chrome, Firefox и Edge поддерживают accent-color. Чтобы обеспечить кроссбраузерную совместимость, до тех пор, пока accent-color не будет поддерживаться на всех платформах, лучше использовать обходные пути.

Ресурсы¶

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