accent-color

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

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

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

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

        
          
          .custom {  accent-color: #F498AD;}
          .custom {
  accent-color: #F498AD;
}

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

Свойство 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 устанавливает фоновый цвет для активного контрола. При этом та же галочка в чекбоксах или точка в радиокнопках будет рисоваться всегда одним цветом. Браузер сам определит чёрной, будет галочка или белой, вычислив контраст в зависимости от установленной темы сайта. На демо-сайте можно в шапке выбрать понравившийся цвет для контролов, а также посмотреть на схемы вычисления контрастных сочетаний для фона и галочки.

        
          
          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);
}

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать