accent-color
Акцентный цвет встроенных элементов формы: флажков, переключателей, ползунков и индикаторов.
Синтаксис
accent-color: color;Значения
| Параметр | Тип | Описание |
|---|---|---|
| color | color | Любой цвет. |
| auto | keyword | Акцент браузера по умолчанию. |
Примеры
Элементы формы в фирменном цвете одной строкой:
<style>
.brand { accent-color: deeppink; }
</style>
<div class="brand">
<label><input type="checkbox" checked> Checkbox</label>
<label><input type="radio" checked> Radio</label>
<input type="range">
<progress value="60" max="100"></progress>
</div>Примечания
Это самый простой способ подогнать стандартные элементы под цвета сайта, не переделывая их. Поддерживается всеми актуальными браузерами.
См. также
- :checked — Срабатывает у отмеченного флажка или переключателя и у выбранного `<option>`.
- color-scheme — Сообщает браузеру, какие цветовые схемы поддерживает страница, чтобы встроенные элементы и полосы прокрутки им соответствовали.
- appearance — Отключает встроенный вид элементов формы, чтобы оформить их с нуля.
Вопросы и ответы по теме
В учебнике
- Оформление форм — Как оформить поля и кнопки — отступы и рамки, состояние фокуса, подсказка, выключенные и ошибочные поля, accent-color и свои флажки через appearance: none.