CSS accent-color: цвет чекбоксов и радиокнопок

Категория: CSS · Язык: CSS · Обновлено:

accent-color задаёт цвет встроенных элементов формы: чекбоксов, радиокнопок, ползунков и прогресса. Свойство наследуется, поэтому достаточно установить его на :root или контейнере формы. В отличие от appearance: none, оно сохраняет системное поведение и доступность элемента.

Задать цвет элементов формы

CSS
:root {
    accent-color: #2563eb;
    color-scheme: light dark;
}

input[type="checkbox"],
input[type="radio"] {
    inline-size: 1.15rem;
    block-size: 1.15rem;
}

progress {
    accent-color: #16a34a;
}

color-scheme: light dark разрешает браузеру использовать тёмную палитру для фона и стандартных контролов, а accent-color задаёт акцент в обеих темах. Цвет применяется к отмеченной части чекбокса, выбранной радиокнопке и заполненной части progress. Точный вид зависит от браузера и операционной системы.

Свойство поддерживается в Chrome 93+, Firefox 92+ и Safari 15.4+, но набор элементов отличается: например, для progress или range поддержка может появиться позже, чем для чекбоксов. Проверяйте целевые браузеры и не делайте цвет единственным признаком состояния.

Если задан appearance: none и контрол нарисован вручную, accent-color перестаёт действовать. В этом случае состояние нужно передавать через :checked, фон, рамку или иконку, а также сохранять фокус :focus-visible. Контраст акцента с фоном должен быть не ниже 3:1 для элементов интерфейса.

В режиме высокой контрастности (forced-colors: active) браузер игнорирует авторские цвета и использует системные. Не отключайте системные стили без необходимости: нативный чекбокс с accent-color обычно доступнее и проще кастомного. Для тёмной темы проверьте оба варианта через color-scheme и prefers-color-scheme.

Документация: MDN accent-color, WCAG 1.4.11.