Новое CSS свойство accent-color
Алоха коллеги! В CSS с недавних пор было анонсировано новое свойство accent-color, и сегодня я как раз хотел бы про него вам рассказать.
Что оно делает: позволяет легко обозначить цвета нашего бренда для полей ввода данных в формах. Вспомните о всех тех чекбоксах, радио-кнопках и прочих элементах, которые сложно стилизовать, да и все браузеры отображают их по-разному. В качестве выхода обычно скрывали дефолтное поле и создавали новое кастомное с помощью псевдоэлементов. Свойство accent-color позволяет нам сохранить вид элементов форм браузера по умолчанию, но применить к ним цвет, соответствующий цветовой гамме нашего сайта.
Поскольку свойство наследуемое, его можно применить на корневом уровне:
Пример::root { accent-color: chocolate;}Так же можем применить к конкретному элементу:.submit-form { accent-color: purple;}input[type="checkbox"] { accent-color: #6ad3ff;}
❗ Ну и вишенка на торт. Согласно ресурсу caniuse свойство уже поддерживается всеми основными браузерами.