accent-color

Современный способ стилизовать чекбоксы, радиокнопки и другие контролы формы

Время чтения: меньше 5 мин

Кратко

Секция статьи "Кратко"

С помощью accent-color можно управлять цветом контролов. Простой способ сделать красивый чекбокс или радиокнопку, без танцев с бубном и трюков.

Пример

Секция статьи "Пример"

Сравните стандартный и стилизованный при помощи accent-color чекбоксы:

        
          
          <input type="checkbox"><input class="custom" type="checkbox">
          <input type="checkbox">
<input class="custom" type="checkbox">

        
        
          
        
      
        
          
          .custom {  accent-color: hotpink;}
          .custom {
  accent-color: hotpink;
}

        
        
          
        
      
Открыть демо в новой вкладке

Как пишется

Секция статьи "Как пишется"

Свойство accent-color сработает для элементов <input> с типами checkbox, radio и range, а также для <progress>. Но будьте внимательны, не во всех браузерах реализована полная поддержка. Например, в момент написания статьи в Safari свойство не срабатывает для <input type="range">.

В качестве значения можно указать цвет в любом доступном формате. Значение по умолчанию — ключевое слово auto. В этом случае браузер сам решает как отобразить контрол.

Если на сайте есть тёмная и светлая темы, то можно для каждой из них отдельно указать подходящий цвет:

        
          
          .custom {  accent-color: magenta;}@media (prefers-color-scheme: dark) {  .custom {    accent-color: darkmagenta;  }}
          .custom {
  accent-color: magenta;
}

@media (prefers-color-scheme: dark) {
  .custom {
    accent-color: darkmagenta;
  }
}

        
        
          
        
      

Как понять

Секция статьи "Как понять"

Очень долгое время задача стилизации контролов формы была большой болью для разработчиков. Каждый браузер в каждой операционной системе рисовал их по своему. А дизайнеры хотели единообразия и чтобы вписывалось в дизайн сайта. Разработчикам приходилось выдумывать трюки и костыли чтобы сделать красиво.

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

Интересно, что свойство accent-color устанавливает фоновый цвет для активного контрола. При этом та же галочка в чекбоксах или точка в радиокнопках будет рисоваться всегда одним цветом. Браузер сам определит чёрной будет галочка или белой, вычислив контраст в зависимости от установленной темы сайта. На демо-сайте можно в шапке выбрать понравившийся цвет для контролов, а также посмотреть на схемы вычисления контрастных сочетаний для фона и галочки.

На практике

Секция статьи "На практике"

Алёна Батицкая

Секция статьи "Алёна Батицкая"

🛠 В данный момент список стилизуемых при помощи accent-color элементов довольно небольшой. В ближайшее время планируется, что список будет пополняться. Но как сделать красивыми все контролы форм прямо сейчас?

Адам Аргайл и Джо Архар предложили в статье «CSS accent-color» классный сниппет. Добавьте его в свой код, поменяйте цвета на нужные и наслаждайтесь красивыми формами!

        
          
          html {  --brand: hotpink;  scrollbar-color: hotpink Canvas;}:root { accent-color: var(--brand); }:focus-visible { outline-color: var(--brand); }::selection { background-color: var(--brand); }::marker { color: var(--brand); }:is(  ::-webkit-calendar-picker-indicator,  ::-webkit-clear-button,  ::-webkit-inner-spin-button,  ::-webkit-outer-spin-button) {  color: var(--brand);}
          html {
  --brand: hotpink;
  scrollbar-color: hotpink Canvas;
}

:root { accent-color: var(--brand); }
:focus-visible { outline-color: var(--brand); }
::selection { background-color: var(--brand); }
::marker { color: var(--brand); }

:is(
  ::-webkit-calendar-picker-indicator,
  ::-webkit-clear-button,
  ::-webkit-inner-spin-button,
  ::-webkit-outer-spin-button
) {
  color: var(--brand);
}