Пример
Установите цвет акцента для различных элементов управления пользовательским интерфейсом:
input[type=checkbox] {
accent-color: red;
}
input[type=radio] {
accent-color: green;
}
input[type=range] {
accent-color:
rgb(0, 0, 255);
}
progress {
accent-color: hsl(39, 100%, 50%);
}
Попробуйте сами »
Определение accent-color
CSS свойство accent-color определяет цвет акцента для элементов управления пользовательским интерфейсом, таких как: <input type="checkbox">, <input type="radio">, <input type="range"> и <progress>.
| Значение по умолчанию: | auto |
|---|---|
| Унаследовано: | yes |
| Анимируемый: | no. Читайте о animatable |
| Версия: | CSS4 |
| JavaScript синтаксис: | object.style.accentColor="red" Попробуй |
Поддержка accent-color
Цифры в таблице указывают первую версию браузера, которая полностью поддерживает это свойство.
| Свойство | |||||
|---|---|---|---|---|---|
| accent-color | 93.0 | 93.0 | 92.0 | 15.4 | 79.0 |
Синтаксис accent-color
accent-color:
auto|color|initial|inherit;
Значения accent-color
| Значение | Описание | Демонстрация |
|---|---|---|
| auto | Значение по умолчанию. Браузер выбирает цвет акцента | Демо ❯ |
| color | Указывает цвет, который будет использоваться в качестве цвета акцента. Могут использоваться все допустимые значения цвета (rgb, hex, named-color и т.д.). Для получения дополнительной информации о допустимых значениях ознакомьтесь с CSS Учебником по цветам | Демо ❯ |
| initial | Устанавливает для этого свойства значение по умолчанию. Читайте о initial | |
| inherit | Наследует это свойство от своего родительского элемента. Читайте о inherit |