appearance

Сбрасывает стандартный внешний вид элементов.

Время чтения: меньше 5 мин

Кратко

Скопировано

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

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

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

Как понять

Скопировано

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

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

Скопировано

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

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

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

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

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

Скопировано

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

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

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

Как пишется

Скопировано
        
          
          .element {  appearance: none;}
          .element {
  appearance: none;
}

        
        
          
        
      

Значение по умолчанию:

        
          
          .element {  appearance: auto;}
          .element {
  appearance: auto;
}

        
        
          
        
      

На практике

Скопировано

Денис Ежков советует

Скопировано

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

Открыть демо в новой вкладке