accent-color: цвет стандартных элементов формы

Назначение

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

Как это работает

Примените цвет к конкретному input или контейнеру: свойство наследуется. Браузер определяет, какие части контролов окрашивать и как сохранить читаемость. Внешний вид зависит от платформы и состояния элемента.

Пример

<style>.preferences{accent-color:#16664b}.preferences label{display:block;margin-block:.7rem}</style>
<div class="preferences">
<label><input type="checkbox" checked> Показывать примеры</label>
<label><input type="radio" name="density" checked> Обычная плотность</label>
<label><input type="radio" name="density"> Компактная плотность</label>
</div>

Что должно получиться

В поддерживающем браузере отмеченные элементы используют выбранный акцент. Нажатие на подпись меняет соответствующий контрол, а радиокнопки с одним name остаются одной группой.

Граница применения и частая ошибка

Accent-color не гарантирует одинаковые пиксели в разных системах и не окрашивает произвольно все виды input. Не скрывайте нативный элемент только ради совпадения с макетом: это требует отдельной работы с фокусом и доступностью.

Самостоятельная проверка

Проверьте состояния checked, disabled и клавиатурный фокус. Включите системную контрастную тему и убедитесь, что выбор по-прежнему заметен. Удалите свойство: форма должна оставаться полностью работоспособной.

HTML и CSS можно изменить в песочнице ниже. Она изолирована: JavaScript, внешние ресурсы и отправка форм отключены. Проверки печати, загрузки файлов и сетевых ответов выполняйте в отдельном учебном проекте.

Связанные материалы

• Специфичность
• Контраст
• Контексты наложения