/ ↲
    Расширенный поиск

    CSS

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

    На практике

    Скопировано

    Алёна Батицкая советует

    Скопировано

    🛠 В данный момент список стилизуемых при помощи 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);
}

    Читайте также