CSS accent-color — колір чекбоксів і радіокнопок

CSS властивість accent-color задає колір акценту стандартних елементів форм: чекбоксів, радіокнопок, повзунків і індикаторів прогресу.

правити

Загальний опис

Роками, щоб пофарбувати чекбокс у колір бренду, доводилось ховати справжній елемент і малювати підробку з <span> — з усіма наслідками для доступності й клавіатури.

accent-color дає рівно те, чого хотіли: нативний елемент, нативна поведінка, твій колір. Один рядок.

правити

Порада

Задай accent-color один раз на :root — і всі форми на сайті одразу підхоплять колір бренду.

автор: NagarD правити

+ додати пораду чи нотатку

Синтаксис

accent-color: auto | <color>;

Властивість accent-color може отримувати 2 значень:

auto

Колір обирає браузер/платформа.

автор: NagarD

правити

color

Будь-яке значення кольору CSS.

автор: NagarD

правити

Переглядачі

Стаціонарні переглядачі Мобільні переглядачі

Підтримка: стаціонарні переглядачі

Переглядач
accent-color	93+	92+	15.4+	79+	93+	-

Підтримка: мобільні переглядачі

Переглядач
accent-color	93+	yes	yes	15.4+

Приклади

+ запропонувати свій приклад у пісочниці

<label><input type="checkbox" checked> Погоджуюсь</label>
<label><input type="radio" name="r" checked> Варіант</label>
<input type="range">

:root {
    accent-color: #0172ad;
}