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

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
Браузер сам определяет цвет в зависимости от платформы.
<цвет>
Задает цвет, который будет использован в качестве акцентного.

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

Пример

=== HTML

1
2
3
4
```html
<input type="checkbox" checked />
<input type="checkbox" class="custom" checked />
```

=== CSS

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

input.custom {
    accent-color: rebeccapurple;
}
```

Ссылки

Комментарии