Цвет акцента CSS

Добавьте фирменный цвет в стандартные поля ввода HTML-форм всего одной строкой кода.

Адам Аргил
Джои Архар
Joey Arhar
X GitHub

Опубликовано: 11 августа 2021 г.

Современные HTML-элементы форм сложно настраивать . Создаётся впечатление, что выбор стоит между минимальным количеством пользовательских стилей или полным их отсутствием, либо сбросом стилей полей ввода и созданием формы с нуля. Создание формы с нуля оказывается гораздо сложнее, чем ожидалось. Это также может привести к забыванию стилей для состояний элементов ( неопределённость , я обращаюсь к тебе) и потере встроенных функций доступности. Полное воссоздание того, что предоставляет браузер, может оказаться более трудоёмким, чем вы готовы взять на себя. 

accent-color: hotpink;

CSS- accent-color из спецификации CSS UI позволяет окрашивать элементы одной строкой CSS-кода, избавляя вас от необходимости в индивидуальной настройке и предоставляя способ привнести ваш бренд в элементы.

Скриншот демонстрации с акцентным цветом в светлой теме оформления, где флажок, радиокнопки, ползунок диапазона и элемент индикатора выполнения окрашены в ярко-розовый цвет.
Демо

Свойство accent-color также работает с color-scheme , позволяя авторам окрашивать как светлые, так и темные элементы. В следующем примере у пользователя активна темная тема, страница использует color-scheme: light dark и тот же accent-color: hotpink для элементов управления, окрашенных в ярко-розовый цвет и имеющих темную тему.

Скриншот темной темы, демонстрирующий демонстрацию с акцентными цветами, где флажок, радиокнопки, ползунок диапазона и элемент индикатора выполнения окрашены в ярко-розовый цвет.
Демо

Поддерживаемые элементы

В настоящее время с помощью свойства accent-color можно изменять цвет только четырех элементов: checkbox , radio , range и progress . Предварительный просмотр каждого из них можно посмотреть здесь: https://accent-color.glitch.me в светлой и темной цветовых схемах.

Флажок

Радио

Диапазон

Прогресс

Гарантированный контраст

Чтобы предотвратить появление недоступных элементов, браузерам с accent-color необходимо определить подходящий контрастный цвет , который будет использоваться вместе с пользовательским акцентным цветом. Ниже приведен скриншот, демонстрирующий различия в алгоритмах Chrome 94 (слева) и Firefox 92 Nightly (справа):

Скриншот, демонстрирующий Firefox и Chromium рядом, показывающий полный спектр флажков в различных оттенках и тонах.

Самое важное, что нужно извлечь из этого, — доверять браузеру . Укажите фирменный цвет и поверьте, что он будет принимать за вас разумные решения.

Дополнительно: Больше вариантов тонировки

Возможно, вас интересует, как затонировать не только эти четыре элемента формы? Вот минимальная песочница, в которой можно затонировать следующие элементы:

  • кольцо фокусировки
  • Выделение выделенного текста
  • список маркеров
  • Стрелочные индикаторы (только в Webkit)
  • Ползунок полосы прокрутки (только для Firefox) 
html {
  --brand: hotpink;
  scrollbar-color: hotpink Canvas;
}

:root { accent-color: var(--brand); }
:focus-visible { outline-color: var(--brand); }
::selection { background-color: var(--brand); }
::marker { color: var(--brand); }

:is(
  ::-webkit-calendar-picker-indicator,
  ::-webkit-clear-button,
  ::-webkit-inner-spin-button,
  ::-webkit-outer-spin-button
) {
  color: var(--brand);
}

Потенциальное будущее

Спецификация не ограничивает применение accent-color только четырьмя элементами, показанными в этой статье; в дальнейшем может быть добавлена ​​поддержка других элементов. Такие элементы, как выбранный <option> в <select> могут быть выделены с помощью accent-color .

Какие ещё варианты тонировки вы предпочитаете использовать в интернете? Напишите в Твиттере @argyleink , указав свой вариант, и он может быть добавлен в эту статью!