Новое CSS свойство accent-color. Как избавиться от проблем со стилизацией чекбоксов, радио-кнопок и прочих элементов⁠⁠

В CSS с недавних пор было анонсировано новое свойство accent-color, и сегодня мы как раз хотим про него вам рассказать.

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

Поскольку свойство наследуемое, его можно применить на корневом уровне:

Пример:

:root {
accent-color: chocolate;
}

Так же можем применить к конкретному элементу:

.submit-form {
accent-color: purple;
}
input[type="checkbox"] {
accent-color: #6ad3ff;
}

❗️ Ну и вишенка на торт. Согласно ресурсу caniuse свойство уже поддерживается всеми основными браузерами.

Наш канал, с полезными мануалами и статьями, мастхэв сервисами и готовыми решения на CSS, Javascript