accent-color
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 type | by computed value type |
Формальный синтаксис
Примеры
Установка пользовательского акцентного цвета
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
Смотрите также
<input>
элемент- Применение цвета к HTML-элементам с помощью CSS
<color>
- Другие свойства, связанные с цветом:
color
(en-US),background-color
,border-color
(en-US),outline-color
,text-decoration-color
(en-US),text-emphasis-color
(en-US),text-shadow
,caret-color
(en-US) иcolumn-rule-color