Настройка стандартных элементов HTML-формы, таких как флажки и переключатели, исторически была сложной задачей. Разработчикам часто приходилось выбирать между использованием стандартных элементов браузера и созданием собственных компонентов с нуля. Создание пользовательских элементов управления занимает много времени и может легко привести к проблемам с доступностью или отсутствию состояний (например, неопределенному состоянию флажков).
Свойство CSS accent-color позволяет легко добавить цвет вашего бренда во встроенные поля ввода HTML-форм с помощью одной строки CSS, не жертвуя при этом доступностью или встроенными функциями браузера.
Как реализовать
Чтобы применить цвет бренда к элементам управления формой:
- Определите цвет бренда. Выберите цвет, который представляет ваш бренд.
- Примените свойство
accent-color. Добавьтеaccent-colorк элементу или контейнеру (например,bodyили определенной форме) в CSS. - Поддержка тёмной темы (необязательно, но рекомендуется). Используйте
color-scheme, чтобы сообщить браузеру, что ваш сайт поддерживает тёмную тему, и при необходимости настройтеaccent-colorдля лучшего контраста.
Пример кода: элементы управления формой, соответствующие бренду
:root {
--brand-color: #6200ee;
}
/* Apply accent-color to the body or a specific container */
body {
accent-color: var(--brand-color);
}
/* Optional: Adjust for dark mode if needed */
@media (prefers-color-scheme: dark) {
:root {
--brand-color: #bb86fc; /* A lighter shade for dark mode */
}
}
<form>
<!-- Checkbox -->
<label for="subscribe">
<input type="checkbox" id="subscribe" checked>
Subscribe to newsletter
</label>
<!-- Radio Buttons -->
<label for="plan-monthly">
<input type="radio" id="plan-monthly" name="plan" value="monthly">
Monthly
</label>
<label for="plan-yearly">
<input type="radio" id="plan-yearly" name="plan" value="yearly" checked>
Yearly
</label>
<!-- Range Slider -->
<label for="volume">Volume:</label>
<input type="range" id="volume" min="0" max="100" value="70">
<!-- Progress Bar -->
<label for="file">Upload Progress:</label>
<progress id="file" max="100" value="70">70%</progress>
</form>
Стратегическое внедрение и рекомендации
- РЕКОМЕНДУЕТСЯ использовать
accent-color, чтобы легко настраивать элементы управления формами в соответствии с вашим брендом. - НЕ полагайтесь на то, что браузер сам настроит контрастность. Хотя браузеры должны автоматически определять подходящий контрастный цвет, известные ошибки в таких реализациях, как Safari (ошибка WebKit 244233) и Android Chrome (ошибка Chromium 343503163), могут препятствовать инвертированию цветов флажков. Это приводит к тому, что элементы управления становятся невидимыми или плохо различимыми при использовании цветов, которые не имеют достаточного контраста с фоном (например, светлые цвета в светлом режиме или темные цвета в темном режиме).
- РЕКОМЕНДУЕТСЯ использовать
accent-colorвместе сcolor-scheme: light dark, чтобы элементы управления формами хорошо выглядели как в светлой, так и в тёмной теме. - НЕ ИСПОЛЬЗУЙТЕ цвет, который слишком близок к цвету фона. Хотя браузеры стараются обеспечить контрастность, лучше выбрать цвет с хорошим базовым контрастом.
- НЕ предполагайте, что
accent-colorработает со всеми элементами формы. Сейчас она применяется только к элементамcheckbox,radio,rangeиprogress.
Резервная стратегия
В браузерах, которые не поддерживают accent-color, элементы управления формой будут выглядеть по умолчанию. Чтобы обеспечить полное соответствие бренду и высокую надежность во всех средах, вы ДОЛЖНЫ реализовать собственную стратегию резервного копирования, используя установленный метод "визуально скрытого ввода".
Прогрессивное улучшение с помощью @supports not
Вы ДОЛЖНЫ использовать правило @supports not, чтобы применять резервные стили, только если accent-color не поддерживается. Это позволит вам использовать простоту accent-color для современных браузеров и при этом гарантировать единообразное оформление для более старых.
1. Структура HTML
Убедитесь, что ярлыки оборачивают текст в <span>, чтобы разрешить селекторы того же уровня в CSS:
<label for="subscribe-fallback">
<input type="checkbox" id="subscribe-fallback" class="visually-hidden" checked>
<span>Subscribe to newsletter</span>
</label>
2. Резервный ССЦ
Примените собственные стили в блоке @supports not:
/* Fallback for older browsers without accent-color */
@supports not (accent-color: var(--brand-color)) {
/* Visually hide the native input using the canonical accessible recipe */
form input[type="checkbox"].visually-hidden {
position: absolute !important;
clip-path: inset(50%) !important;
overflow: hidden !important;
width: 1px !important;
height: 1px !important;
margin: -1px !important;
padding: 0 !important;
border: 0 !important;
white-space: nowrap !important;
}
/* Style the wrapper label */
label {
position: relative;
padding-left: 2rem;
cursor: pointer;
display: inline-flex;
align-items: center;
}
/* Custom box for checkbox */
input[type="checkbox"] + span::before {
content: "";
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
width: 1.2rem;
height: 1.2rem;
border: 2px solid #ccc;
background: white;
border-radius: 4px;
box-sizing: border-box;
transition: all 0.2s ease;
}
/* Ensure custom checkbox shows focus for keyboard users */
input[type="checkbox"]:focus-visible + span::before {
outline: 2px solid #000;
outline-offset: 2px;
}
/* Checked State */
input[type="checkbox"]:checked + span::before {
background-color: var(--brand-color, #6200ee);
border-color: var(--brand-color, #6200ee);
}
/* Checkmark (Unicode) */
input[type="checkbox"]:checked + span::after {
content: "✓";
position: absolute;
left: 0.25rem;
top: 50%;
transform: translateY(-50%);
color: white;
font-weight: bold;
font-size: 0.9rem;
}
/* Fallback for Range Slider */
input[type="range"] {
-webkit-appearance: none;
appearance: none;
background: transparent;
}
/* Webkit (Chrome, Safari, Edge) */
input[type="range"]::-webkit-slider-runnable-track {
width: 100%;
height: 8px;
/* Use gradient to show progress for a static value (e.g., 70%) or update with JS */
background: linear-gradient(to right, var(--brand-color, #6200ee) 70%, #ccc 70%);
border-radius: 4px;
}
input[type="range"]::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
height: 16px;
width: 16px;
border-radius: 50%;
background: var(--brand-color, #6200ee);
cursor: pointer;
margin-top: -4px; /* Center vertically */
}
/* Firefox */
input[type="range"]::-moz-range-track {
width: 100%;
height: 8px;
background: #ccc;
border-radius: 4px;
}
input[type="range"]::-moz-range-thumb {
height: 16px;
width: 16px;
border-radius: 50%;
background: var(--brand-color, #6200ee);
cursor: pointer;
}
/* Firefox specific progress bar */
input[type="range"]::-moz-range-progress {
background-color: var(--brand-color, #6200ee);
height: 8px;
border-radius: 4px;
}
/* Fallback for Progress Bar */
progress {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
border: none;
background: #ccc;
height: 8px;
border-radius: 4px;
}
progress::-webkit-progress-bar {
background-color: #ccc;
border-radius: 4px;
}
progress::-webkit-progress-value {
background-color: var(--brand-color, #6200ee);
border-radius: 4px;
}
progress::-moz-progress-bar {
background-color: var(--brand-color, #6200ee);
border-radius: 4px;
}
}
Прогресс динамического диапазона в резервном Webkit
Чтобы индикатор выполнения перемещался вместе с ползунком в браузерах Webkit (без accent-color), можно использовать переменную CSS и небольшой фрагмент кода JavaScript.
Обновите CSS. Используйте переменную CSS для контрольной точки градиента:
input[type="range"]::-webkit-slider-runnable-track { background: linear-gradient(to right, var(--brand-color) var(--progress, 0%), #ccc var(--progress, 0%)); }Добавьте код JavaScript. Обновите переменную в событии
input:
if (!CSS.supports('accent-color')) {
const slider = document.getElementById('volume');
slider.addEventListener('input', (e) => {
e.target.style.setProperty('--progress', `${e.target.value}%`);
});
}