appearance: нативное оформление элемента управления
Appearance управляет использованием платформенного оформления элементов управления. Значение none помогает строить собственный внешний вид, но часть привычных визуальных признаков придётся восстановить самостоятельно.
Назначение
Appearance управляет использованием платформенного оформления элементов управления. Значение none помогает строить собственный внешний вид, но часть привычных визуальных признаков придётся восстановить самостоятельно.
Как это работает
В примере свойство применяется к кнопке, у которой явно заданы рамка, фон и фокус. Смысл и клавиатурное поведение остаются у нативного button, а не у заменяющего его div.
Пример
<style>.plain-native{appearance:none;font:inherit;padding:.7rem 1rem;border:2px solid #286947;border-radius:.4rem;background:#e4f2e9;color:#183e29}.plain-native:focus-visible{outline:3px solid #174ea6;outline-offset:3px}</style>
<button class="plain-native" type="button">Учебное действие</button>Что должно получиться
Кнопка получает заданное оформление и сохраняет обычную роль кнопки. Нажатие в этом примере не запускает прикладной обработчик: демонстрируются стили.
Граница применения и частая ошибка
Не снимайте appearance у чекбокса или select без проверки состояния, индикатора выбора и фокуса. Отрисовка и доступные значения различаются по элементам и браузерам. Для изменения только акцентного цвета часто достаточно accent-color.
Самостоятельная проверка
Сравните none и auto в двух браузерах. Проверьте клавиатурный фокус и режим повышенного контраста. Убедитесь, что кнопка остаётся распознаваемой, даже если фон или часть авторских цветов заменены системой.
HTML и CSS можно изменить в песочнице ниже. Она изолирована: JavaScript, внешние ресурсы и отправка форм отключены. Проверки печати, загрузки файлов и сетевых ответов выполняйте в отдельном учебном проекте.