appearance

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

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

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

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

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

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

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

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

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

        
          
          .element {  appearance: none;}
          .element {
  appearance: none;
}

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

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

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

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

На практике

Скопировать ссылку "На практике" Скопировано

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

Скопировать ссылку "Денис Ежков советует" Скопировано

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

+ Развернуть