accent-color

Baseline 2022

Newly available

Since March 2022, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

CSS-свойство accent-color устанавливает акцентный (en-US) цвет для некоторых элементов управления пользовательским интерфейсом.

Интерактивный пример

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

Синтаксис

css
/* Ключевые слова */
accent-color: auto;

/* <color> значения */
accent-color: red;
accent-color: #5729e9;
accent-color: rgb(0, 200, 0);
accent-color: hsl(228, 4%, 24%);

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

Значения

auto

Браузер сам определяет цвет в зависимости от платформы.

<color>

Задает цвет, который будет использован в качестве акцентного.

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

Начальное значениеauto
Применяется квсе элементы
Наследуетсяда
Обработка значенияauto is computed as specified and <color> values are computed as defined for the color (en-US) property.
Animation typeby computed value type

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

accent-color = 
  auto     | (en-US)
  <color>

Примеры

Установка пользовательского акцентного цвета

HTML

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

CSS

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

input.custom {
  accent-color: rebeccapurple;
}

Результат

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

Specification
CSS Basic User Interface Module Level 4
# widget-accent

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

BCD tables only load in the browser

Смотрите также