Перейти к содержанию

accent-color

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

Демо

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

Синтаксис

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
/* Специальные значения */
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

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

<цвет>

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

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

Пример

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

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
input {
    accent-color: auto;
    display: block;
    width: 30px;
    height: 30px;
}

input.custom {
    accent-color: rebeccapurple;
}

Ссылки

Комментарии