accent-color

Baseline Widely available *

This feature is well established and works across many devices and browser versions. It’s been available across browsers since March 2022.

* Some parts of this feature may have varying levels of support.

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

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

accent-color: red;

accent-color: #74992e;

accent-color: rgb(255, 255, 128);

accent-color: hsl(250, 100%, 34%);

<section class="default-example container" id="default-example">
  <div>
    <input checked="" id="example-element" type="checkbox" />
    <label for="example-element" id="example-label">Example Label</label>
  </div>
</section>

.container > div {
  display: flex;
  align-items: center;
}

#example-element {
  width: 40px;
  height: 40px;
}

#example-label {
  margin-left: 10px;
  font-size: x-large;
}

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

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

Синтаксис

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

/* Значения <color> */
accent-color: darkred;
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 property.
Animation typeby computed value type

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

accent-color = 
  auto     |
  <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

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

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