👋 Привет, друг!
В этом канале я выкладываю структурированные, обучающие уроки и материалы по вёрстке сайтов и фронтенду.
Присоединяйся и начинай учиться!
Связь: @Tigran1963
Post #2844
557
Свойство accent-color
Каждый, кто хоть раз пытался сделать нативные чекбоксы (<input type="input">), радиокнопки или ползунки (<input type="range">) фирменного цвета бренда, знает эту боль. Приходилось скрывать стандартный инпут через appearance: none, верстать псевдоэлементы ::before / ::after и прописывать логику для состояний :checked и :focus.
Но в современном CSS есть потрясающее свойство – accent-color. Оно позволяет перекрасить интерактивные элементы UI буквально в одну строку!
Какими элементами управляет accent-color?
Чекбоксы (<input type="checkbox">)
Радиокнопки (<input type="radio">)
Ползунки (<input type="range">)
Индикаторы прогресса (<progress>)
Браузер не просто тупо заливает элемент вашим цветом. Он автоматически рассчитывает контрастность для галочки внутри чекбокса! Если ваш accent-color слишком темный, галочка станет белой, а если светлый — черной, чтобы сохранить доступность (A11y).
Да, это не заменит сложный кастомный дизайн с иконками, но для 90% стандартных проектов и админок – это идеальное решение, экономящее кучу времени и килобайты кода.
#полезности #css
Каждый, кто хоть раз пытался сделать нативные чекбоксы (<input type="input">), радиокнопки или ползунки (<input type="range">) фирменного цвета бренда, знает эту боль. Приходилось скрывать стандартный инпут через appearance: none, верстать псевдоэлементы ::before / ::after и прописывать логику для состояний :checked и :focus.
Но в современном CSS есть потрясающее свойство – accent-color. Оно позволяет перекрасить интерактивные элементы UI буквально в одну строку!
/* Перекрасит ВСЕ нативные инпуты на сайте в ваш бренд-цвет */
root {
accent-color: #7b2cbf;
}
/* Или можно применить точечно к конкретной форме */
.custom-form {
accent-color: #ff007f;
}
Какими элементами управляет accent-color?
Чекбоксы (<input type="checkbox">)
Радиокнопки (<input type="radio">)
Ползунки (<input type="range">)
Индикаторы прогресса (<progress>)
Браузер не просто тупо заливает элемент вашим цветом. Он автоматически рассчитывает контрастность для галочки внутри чекбокса! Если ваш accent-color слишком темный, галочка станет белой, а если светлый — черной, чтобы сохранить доступность (A11y).
Да, это не заменит сложный кастомный дизайн с иконками, но для 90% стандартных проектов и админок – это идеальное решение, экономящее кучу времени и килобайты кода.
#полезности #css
- 👍 5
