Темы для интерфейса, созданного браузером

Веб-функции: ::selection user-select accent-color color-scheme scrollbar-color scrollbar-width :user-valid и :user-invalid :placeholder-shown ::placeholder field-sizing resize (свойство CSS) Настраиваемый элемент <select> appearance :has() ::file-selector-button

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

Прежде чем воссоздавать элементы интерфейса браузера (элементы управления формой, полосы прокрутки, выделения, сообщения об ошибках и т. д.), убедитесь, что:

  1. Интерфейс браузера нельзя настроить в соответствии с вашими потребностями даже с помощью современного CSS.
  2. желаемая настройка достаточно критична, чтобы оправдать компромиссы воссоздания встроенного пользовательского интерфейса — в первую очередь потерю доступной семантики, обработки клавиатуры, IME и интеграции AT, которые нативный пользовательский интерфейс предоставляет бесплатно.

Примеры возможных настроек:

  • Используйте ::selection, чтобы настроить цвета выделенного текста.
  • НЕ применяйте user-select: none к тексту контента. Это нарушает работу копирования и вставки, инструментов перевода и жестов вспомогательных технологий "читать отсюда". Ограничьте его элементами интерфейса (маркеры перетаскивания, панели инструментов, лишние подписи к кнопкам).
  • Используйте accent-color, чтобы применить цвет акцента страницы к любому элементу интерфейса, созданному браузером.
  • Используйте color-scheme, чтобы интерфейс браузера адаптировался к светлой или тёмной теме.
  • Используйте scrollbar-color, чтобы настроить цвета полосы прокрутки, и scrollbar-width, чтобы управлять ее толщиной. Бегунок должен быть хорошо виден на фоне полосы (≥3:1). Не устанавливайте scrollbar-width: none для прокручиваемых областей (используйте это свойство, только если прокрутка полностью заменена другим элементом).
  • Для стилизации валидности используйте :user-invalid/:user-valid, а не :invalid/:valid. Они срабатывают только после того, как пользователь взаимодействовал с полем, что позволяет избежать пометки обязательных пустых полей как ошибок при загрузке страницы. Исключите ползунки диапазонов при таргетинге на input (например, input:not(input[type="range"]):user-valid), чтобы при настройке ползунка к нему не применялись границы или фоны допустимости поля.
  • Кнопки и текстовые поля (включая <textarea>) обычно можно стилизовать как обычные элементы.
  • Используйте font-size для масштабирования и другие текстовые свойства для управления типографикой.

Стилизация текстовых полей (<input> и <textarea>)

Для большинства целей стилизации (например, цвета, границы, фон, типографика и т.д.) рассматривайте эти элементы как обычные текстовые контейнеры.

  • Используйте :placeholder-shown и ::placeholder, чтобы задать стиль плейсхолдеров.
  • Используйте field-sizing: content, чтобы размер текстовых полей соответствовал контенту.
  • Для элементов <textarea> используйте resize: vertical, чтобы отключить изменение размера по горизонтали, или resize: none, чтобы отключить изменение размера по горизонтали и вертикали.

Элементы управления с несколькими вариантами ответа (выбор, переключатели, флажки)

  • Чтобы выбрать один из вариантов в раскрывающемся списке, используйте <select> + appearance: base-select + ::picker(select). Подробнее о стилях для брендированных селекторов…
  • Выбор одного или нескольких вариантов из нескольких, расположенных на странице в ряд: используйте <input type=checkbox> или <input type=radio> внутри <label> для каждого варианта. Стиль через label:has(:checked).
  • Задайте стиль флажков, переключателей и радиокнопок с помощью appearance: none и сгенерированного контента (::before/::after) или фоновых изображений, чтобы показать выбранное состояние.

Нетекстовые элементы <input> (кнопки, ползунки, поля ввода файлов и т. д.)

  • Ввод файлов: используйте ::file-selector-button, чтобы задать стиль кнопки.
  • Не используйте <input> со значением type, равным button, submit или reset. Используйте вместо него <button> и задайте стиль как для обычного элемента.
  • Ползунки. Используйте appearance: none + псевдоэлементы thumb (::-webkit-slider-thumb, ::-moz-range-thumb и т. д.) и псевдоэлементы track (::-webkit-slider-runnable-track, ::-moz-range-track и т. д.) для более точного управления.