Справочник · CSS

accent-color: цвет флажка и ползунка

Свойство красит системные элементы формы: checkbox, radio, range и progress.

Как это работает

Браузер рисует их своими силами, обычный color их почти не меняет. accent-color подстраивает акцент под сайт одной строкой. Это не замена полностью своей отрисовки флажка. Цвет должен оставаться заметным на белом и на тёмном фоне. Подпись по-прежнему нужна в label.

input[type="checkbox"] { accent-color: #2f5d50; width: 1rem; height: 1rem; }

Когда использовать

Флажки и переключатели в обычной форме. Сложный дизайн контрола собирают отдельно, не только этим свойством.

Частые ошибки

• Покрасили текст подписи и думали, что флажок тоже изменится.
• Акцент слишком светлый и галочку не видно.
• Размер флажка остался крошечным на телефоне.