Обложка канала

Frontender's notes

Годные заметки, новости, видео и интересные статьи для Frontend разработчиков.

Frontender's notes

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