accent-color

Ограниченная доступность

Эта функция не относится к Baseline, так как она не работает в некоторых из наиболее широко используемых браузеров.

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

Попробуйте

Браузеры, которые поддерживают accent-color в настоящее время применяют его к следующим HTML-элементам:

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

Синтаксис

/* Keyword values */
accent-color: auto;

/* <color> values */
accent-color: darkred;
accent-color: #5729e9;
accent-color: rgb(0 200 0);
accent-color: hsl(228 4% 24%);

/* Global values */
accent-color: inherit;
accent-color: initial;
accent-color: revert;
accent-color: revert-layer;
accent-color: unset;

Значения

auto: Представляет цвет, выбранный UA, который должен соответствовать цвету акцента платформы, если таковой имеется.
<color>: Задает цвет, который будет использоваться как цвет акцента.

Формальное определение

Начальное значение	`auto`
Применяется к	всем элементам
Наследуется	да
Вычисленное значение	`auto` вычисляется как указано, и значения `<color>` вычисляются так, как определено для свойства `color`.
Тип анимации	по типу вычисленного значения

Формальный синтаксис

accent-color = 
  auto     |
  <color>

Примеры

Установка настраиваемого цвета акцента

HTML

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

CSS

input {
  accent-color: auto;
  display: block;
  width: 30px;
  height: 30px;
}

input.custom {
  accent-color: rebeccapurple;
}

Результат

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

Спецификация
CSS Basic User Interface Module Level 4 # widget-accent

Совместимость с браузерами

	Рабочий стол					Мобильные устройства
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox для Android	Opera Android	Safari на iOS	Samsung Internet	WebView Android
`accent-color`	93	93	92	79	15.4 Safari не корректирует цвет глифов (например, галочек) на элементах форм, чтобы сохранить контрастность. См. ошибку 244233.	93	92	66	15.4 Safari не корректирует цвет глифов (например, галочек) на элементах форм, чтобы сохранить контрастность. См. ошибку 244233.	17.0	93
`auto`	93	93	92	79	15.4	93	92	66	15.4	17.0	93

См. также

background-color, border-color, caret-color, color, column-rule-color, outline-color, text-decoration-color, text-emphasis-color, text-shadow: Другие свойства, связанные с цветом
<color>: Соответствующий тип данных
<input>: Связанный HTML-элемент

© 2005–2024 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/CSS/accent-color