CSS свойство appearance

CSS свойство appearance используется для отображения элемента с помощью использования платформенно-зависимого оформления на основе темы операционной системы пользователя.

Свойство -moz-appearance используется в Gecko (Firefox) для отображения элемента с помощью платформенно-зависимого оформления на основе темы операционной системы.

Свойство -webkit-appearance - это CSS расширение, поддерживаемое браузерным движком WebKit. Расширения WebKit содержат префикс -webkit-, который означает, что он относится к WebKit платформе с открытым исходным кодом.

Несмотря на то, что свойство -webkit-appearance не является частью официальной спецификации W3C CSS, оно предусмотрено для работы на браузерах, управляемые браузерным движком WebKit, такие как Apple Safari и Google Chrome.

Это экспериментальное свойство.
Значение по умолчанию auto
Применяется Ко всем элементам.
Наследуется Нет
Анимируемое Да
Версия CSS3
DOM синтаксис object.style.Appearance = "none";

Синтаксис

appearance: none | auto | initial | inherit | icon | window | button | menu | field | desktop | workspace | document | tooltip | dialogue | push-button | hyperlink | radio-button | checkbox | menu-item | tab | menubar | outline-tree | range | signature | password;

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</title>
    <style>
      div {
      width: 80px;
      height: 25px;
      text-align: center;
      -webkit-appearance: button; 
      -moz-appearance: button; 
      appearance: button; 
      }
    </style>
  <body>
    <h2>Пример свойства appearance</h2>
    <p>Here is a...</p>
    <div>
    Button?</div
    </head>
  </body>

Значения

Значение Описание
none Значение по умолчанию. Никакое специальное оформление не применяется.
auto Пользователь выбирает необходимое оформление элемента. Действует как “none” для элементов, которые не имеют какого-либо специального оформления.
icon Маленькое изображение какого-либо объекта, может иметь название или метку.
window Окно просмотра, которое используется, чтобы представить объект и контент для пользовательского просмотра и взаимодействия.
button Маленький объект, обычно с текстовой меткой пользовательского выбора.
menu Набор вариантов для пользовательского выбора, иногда можно выбрать несколько вариантов. Имеет множество видов.
field Область, где пользователь может ввести или изменить значение, обычно с помощью клавиатуры.
desktop Окно, которое представляет систему как одно целое и может содержать другие окна.
workspace Окно, представляющее проект или приложение, которое может содержать другие окна. Обычно имеет строку заголовка, где можно увидеть название проекта или приложения.
document Окно с пользовательским документом. Обычно имеет строку заголовка с названием документа. Также может быть использовано для представления файлов или справочников в системе файлов.
tooltip Окно, которое используется для временного отображения информации. Может иметь название "info" в системных цветах CSS2.
dialogue Окно, представляющее уведомления или альтернативы для пользователя. Также называется "message-box" в системных шрифтах CSS2.
push-button Кнопка, которая вокруг себя имеет границы. Также называется "caption" в системных шрифтах CSS2.
hyperlink Кнопка, представляющая гиперссылку. Гиперссылкой может считаться и обычный текст, который подчеркнут или имеет другой цвет.
radio-button Элемент выглядит как переключатель.
checkbox Элемент отображается как флажок, включая только действительную часть "checkbox".
menu-item Выбор в меню, который может также действовать как метка для вложенной (иерархической) меню.
tab Кнопка, представляющая метку для одной части окна в интерфейсе на основе вкладок.
menubar Главное меню, которое представляется линейно - горизонтальной чертой.
outline-tree Меню, где опции могут отображаться или быть скрытыми при помощи виджетов, которые часто представляются в виде маленьких треугольников или знаками плюс и минус.
range Управляющий элемент, который отображает текущую опцию, возможно, в виде графики, и дает возможность пользователю выбрать другие опции.
signature Поле для введения подписи.
password Поле для введения пароля. Обычно текст отображается в виде каких-либо знаков, чтобы значение стало непонятным.
initial Устанавливает свойство в значение по умолчанию.
inherit Значение элемента наследуется от родительского элемента.

Поддержка браузера

chrome firefox safari opera
4.0+ -webkit- 2.0+ -moz 3.1+ -webkit- 15.0+ -webkit-

Практикуйте свои знания

What does the appearance property in CSS do?
Считаете ли это полезным?