accent-color

Определение и применение

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

Как согласовать цвет флажков, переключателей и ползунков — в уроке «Оформление форм».

Попробуйте значения accent-color

<div class="stage demo-target">
  <label><input type="checkbox" checked /> Получать новости</label>
  <p>
    <label><input type="radio" name="walk" checked /> Утро</label>
    <label><input type="radio" name="walk" /> Вечер</label>
  </p>
  <label
    >Длина прогулки <input type="range" min="0" max="100" value="60"
  /></label>
  <p>
    <label>Прогресс <progress max="100" value="60">60%</progress></label>
  </p>
</div>

* {
  box-sizing: border-box;
}
.stage {
  width: 100%;
  max-width: 340px;
  padding: 16px;
  background: white;
  color: #172c3d;
  font: 16px/1.5 system-ui;
}
.demo-target {
  accent-color: auto;
}
input[type="range"],
progress {
  display: block;
  width: 100%;
}

* {
  box-sizing: border-box;
}
.stage {
  width: 100%;
  max-width: 340px;
  padding: 16px;
  background: white;
  color: #172c3d;
  font: 16px/1.5 system-ui;
}
.demo-target {
  accent-color: #a13610;
}
input[type="range"],
progress {
  display: block;
  width: 100%;
}

* {
  box-sizing: border-box;
}
.stage {
  width: 100%;
  max-width: 340px;
  padding: 16px;
  background: white;
  color: #172c3d;
  font: 16px/1.5 system-ui;
}
.demo-target {
  accent-color: #176a48;
}
input[type="range"],
progress {
  display: block;
  width: 100%;
}

* {
  box-sizing: border-box;
}
.stage {
  width: 100%;
  max-width: 340px;
  padding: 16px;
  background: white;
  color: #172c3d;
  font: 16px/1.5 system-ui;
}
.demo-target {
  accent-color: #663399;
}
input[type="range"],
progress {
  display: block;
  width: 100%;
}

Поддержка браузерами

Спецификация: CSS ui

◐С ограничениями: Chrome Android, Opera Android, Samsung Android, WebView Android.

Показать браузеры

ВсеКомпьютерыМобильные

Совместимостьcss.properties.accent-color

Возможность	Компьютеры					Мобильные
	ChromeChrome	EdgeEdge	FirefoxFirefox	OperaOpera	SafariSafari	Chrome AndroidChromeAndroid	Firefox for AndroidFirefoxAndroid	Opera AndroidOperaAndroid	Safari on iOSSafariiOS	Samsung BrowserSamsungAndroid	WebView AndroidWebViewAndroid	WebView on iOSWebViewiOS
accent-color	✓93	✓93	✓92	✓79	✓26.2…	◐93…	✓92	◐66…	✓26.2…	◐17.0…	◐93…	✓26.2…
auto	✓93…	✓93…	✓92	✓79…	✓15.4	✓93	✓92	✓66	✓15.4	✓17.0	✓93	✓15.4
currentColor	✓93	✓93	✓92	✓79	✓15.4	✓93	✓92	✓66	✓15.4	✓17.0	✓93	✓15.4
transparent	✓93	✓93	✓92	✓79	✓15.4	✓93	✓92	✓66	✓15.4	✓17.0	✓93	✓15.4
Ещё 3 значений · ✓ поддерживаются везде более 3 летСвернуть

✓поддерживается◐с ограниченияминет поддержки?нет данных≤31 — не позднее версии 31

Оттенки и контраст зависят от браузера, темы и системных настроек. В режиме принудительных цветов пользовательская палитра может заменить заданный акцент. В ранних реализациях Safari автоматический контраст ограничен.

CSS синтаксис:

accent-color: auto | <color>;

/* Глобальные значения */
accent-color: initial | inherit | unset | revert | revert-layer;

| разделяет варианты. <color> — CSS-цвет, например teal, #2563eb или rgb(30 100 180).

JavaScript синтаксис:

element.style.accentColor = "teal";

Начальное значение свойства

auto.

Значения свойства

Что именно перекрашивается

Свойство применяют к input типов checkbox, radio, range и к progress. Оно не задаёт фон обычной кнопки и не гарантирует одинаковые оттенки во всех состояниях: неактивные, отключённые и выбранные элементы браузеры рисуют по-разному.

Свойство наследуется: его можно задать форме целиком и переопределить у отдельного поля. Если убрать стандартное оформление через appearance: none, акцентной части может больше не быть. Для простой смены цвета достаточно accent-color; собственный вид флажка требует отдельного оформления состояний и фокуса.

Спецификация

CSS Basic User Interface — accent-color.

Наследуется

Да.

Анимируемое

Цвета интерполируются плавно по типу вычисленного значения. Переход между auto и цветом — дискретный.

Примеры, попробуйте сами

Один акцент для группы полей

Измените цвет у формы. Выберите флажок и переключатель, передвиньте ползунок: браузер сохраняет управление, меняется акцент. Затем верните auto.

base.css

CSS

body {
    margin: 1rem;
    font:
        16px/1.5 system-ui,
        sans-serif;
    color: #243342;
    background: #fff;
}
* {
    box-sizing: border-box;
}

index.html

HTML

<!doctype html>
<html lang="ru">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Один акцент для группы полей</title>
  </head>
  <body>
    <form>
      <p>
        <label><input type="checkbox" checked /> Получать новости</label>
      </p>
      <p>
        <label><input type="radio" name="delivery" checked /> Самовывоз</label>
        <label><input type="radio" name="delivery" />Доставка</label>
      </p>
      <p>
        <label>Количество <input type="range" min="1" max="10" value="6" /></label>
      </p>
      <label>Готовность <progress max="100" value="65">65%</progress></label>
    </form>
  </body>
</html>

style.css

CSS

form {
    accent-color: teal;
}