skip to main content

appearance

css

Кратко 🔗

Некоторые элементы форм имеют уникальный внешний вид в каждой операционной системе. Например, выпадающий список в macOS внешне выглядит совсем не так, как такой же выпадающий список в Windows.

Свойство appearance позволяет задавать внешний вид одних элементов другим элементам. При этом браузер будет отрисовывать их с учётом текущей операционной системы пользователя и темы оформления.

В настоящее время используется в основном appearance: none для сброса системных стилей, остальные значения не работают практически ни в одном браузере.

Как это понять 🔗

Свойство appearance может использоваться как для задания, так и для сброса внешнего вида элемента.

Сбрасываем внешний вид 🔗

Если задать appearance: none, то происходит «сброс» внешнего вида элемента. Приведение его к общему знаменателю во всех браузерах и всех операционных системах.

Например, в браузере Safari на iOS поле ввода с атрибутом type="search" принудительно стилизуется скруглёнными углами, тенями и рамками. Чтобы не перекрывать каждое свойство по отдельности, можно задать такому полю appearance: none.

See the Pen appearance by Denis Ezhkov (@ezhkov) on CodePen.

Изменение вида текстового поля на мобильных с поискового на обычное на с помощью appearance: none.

Если пример открыть не в мобильном браузере, то разница не заметна, так как в десктопных браузерах внешний вид полей ввода более или менее унифицирован.

Меняем внешний вид элемента 🔗

Значение appearance, отличное от none, задаётся, чтобы применить специфичные для платформы стили к элементам, у которых этих стилей нет.

В этом случае, если нам нужно, чтобы поле ввода выглядело как поле поиска, мы можем задать appearance: searchfield

See the Pen appearance 2 by Denis Ezhkov (@ezhkov) on CodePen.

Изменение вида текстового поля на мобильных с обычного на поисковое с помощью appearance: searchfield.

Как пишется 🔗

appearance: none;
appearance: auto; /* Значение по умолчанию */

В работе 🔗

Сброс стандартного отображения элементов может быть полезным при применении пользовательских стилей к элементам форм:

See the Pen appearance 3 by Denis Ezhkov (@ezhkov) on CodePen.

Автор: Денис,