This page was translated from English by the community.Learn more and join the MDN Web Docs community.
accent-color
Limited availability
This feature is not Baseline because it does not work in some of the most widely-used browsers.
CSS-свойствоaccent-color устанавливаетакцентный цвет для некоторых элементов управления пользовательским интерфейсом.
Интерактивный пример
accent-color: red;accent-color: #74992e;accent-color: rgb(255, 255, 128);accent-color: hsl(250, 100%, 34%);<section> <div> <input checked="" type="checkbox" /> <label for="example-element">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 |
|---|---|
| Применяется к | все элементы |
| Наследуется | да |
| Обработка значения | auto is computed as specified and<color> values are computed as defined for thecolor property. |
| Animation type | by computed value type |
Формальный синтаксис
accent-color =
auto|
<color>
Примеры
Установка пользовательского акцентного цвета
HTML
html
<input type="checkbox" checked /><input type="checkbox" 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 |
Совместимость с браузерами
Смотрите также
- Другие свойства, связанные с цветом:
background-color,border-color,caret-color,color,column-rule-color,outline-color,text-decoration-color,text-emphasis-color,text-shadow <color>— связанный тип данных<input>— связанный HTML-элемент