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	Значение элемента наследуется от родительского элемента.


4.0+ -webkit-	2.0+ -moz	3.1+ -webkit-	15.0+ -webkit-

4.0+ -webkit-

2.0+ -moz

3.1+ -webkit-

15.0+ -webkit-

CSS свойство appearance

Синтаксис

Пример

Значения

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

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