appearance (-moz-appearance, -webkit-appearance)
================================================

**Экспериментальная возможность:** **Это экспериментальная технология**  
Так как спецификация этой технологии ещё не стабилизировалась, смотрите таблицу совместимости по поводу использования в различных браузерах. Также заметьте, что синтаксис и поведение экспериментальной технологии может измениться в будущих версиях браузеров, вслед за изменениями спецификации.

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

Свойство **`-webkit-appearance`** используется в браузерах WebKit-based (например, Safari) и Blink-based (например, Chrome, Opera) для того же эффекта. Заметьте, что Firefox и Edge также поддерживают `-webkit-appearance`, для обеспечения совместимости.

Интерактивный пример
--------------------

Это свойство часто используется в таблицах стилей XUL для разработки пользовательских виджетов в стиле, соответствующем платформе. Оно, также, используется в реализации XBL виджетов, которые поставляются с платформой Mozilla.

**Примечание:** Если вы хотите использовать это свойство на веб-сайте, вы должны тестировать его очень осторожно. Хотя оно поддерживается в большинстве современных браузерах, его реализация широко варьируется. В старых браузерах, даже ключевое слово `none` не окажет одинакового эффекта на все элементы формы различных браузеров, а некоторые его совсем не поддерживают. Различия меньше в более современных браузерах.

Синтаксис
---------


```css
/\* CSS модуль базового интерфейса 4 уровня, значения \*/
appearance: none;
appearance: auto;
appearance: button;
appearance: textfield;
appearance: searchfield;
appearance: textarea;
appearance: push-button;
appearance: button-bevel;
appearance: slider-horizontal;
appearance: checkbox;
appearance: radio;
appearance: square-button;
appearance: menulist;
appearance: menulist-button;
appearance: listbox;
appearance: meter;
appearance: progress-bar;

/\* Частичный список доступных значений в Gecko \*/
-moz-appearance: scrollbarbutton-up;
-moz-appearance: button-bevel;

/\* Частичный список доступных значений в WebKit/Blink (таких как Gecko и Edge) \*/
-webkit-appearance: media-mute-button;
-webkit-appearance: caret;
```


Свойство `-moz-appearance` может быть указано как одно значение, выбранное из списка ниже.

### Значения

`<appearance>` является одним из нижеследующих ключевых свойств:

| Value | Browser | Description |
| --- | --- | --- |
| `none` | Firefox Chrome Safari Edge | Hides certain features of widgets, such as arrow displayed in select element, indicating that list can be expanded. |
| `auto` | Firefox Chrome Edge | 
 The user agent selects the appropriate special styling based on the
 element. Acts as `none` on elements with no special styling.
  |
| `menulist-button` | Firefox Chrome Safari Edge |  |
| `textfield` | Firefox Chrome Safari Edge |  |
| The following values are treated as equivalent to `auto`: |
| `button` | Firefox Chrome Safari Edge | The element used to be drawn like a button. |
| `checkbox` | Firefox Chrome Safari Edge | 
 The element used to be drawn like a checkbox, including only the actual
 "checkbox" portion.
  |
| `listbox` | Firefox Chrome Safari Edge |  |
| `menulist` | Firefox Chrome Safari Edge |  |
| `meter` | Chrome Safari Firefox |  |
| `progress-bar` | Chrome Safari Firefox |  |
| `push-button` | Chrome Safari Edge |  |
| `radio` | Firefox Chrome Safari Edge | 
 The element used to be drawn like a radio button, including only the actual
 "radio button" portion.
  |
| `searchfield` | Firefox Chrome Safari Edge |  |
| `slider-horizontal` | Chrome Safari Edge |  |
| `square-button` | Chrome Safari Edge |  |
| `textarea` | Firefox Chrome Safari Edge |  |

#### Non-standard keywords

The following values may be operational on historical browser versions using **`-moz-appearance`** or **`-webkit-appearance`** prefix, but not on the standard **`appearance`** property.

| Value | Browser | Description |
| --- | --- | --- |
| `attachment` | Safari |  |
| `borderless-attachment` | Safari |  |
| `button-bevel` | Firefox Chrome Safari Edge |  |
| `caps-lock-indicator` | Safari Edge |  |
| `caret` | Firefox Chrome Safari Edge |  |
| `checkbox-container` | Firefox | The element is drawn like a container for a checkbox, which may include a prelighting background effect under certain platforms. Normally it would contain a label and a checkbox. |
| `checkbox-label` | Firefox |  |
| `checkmenuitem` | Firefox |  |
| `color-well` | Safari | `input type=color` |
| `continuous-capacity-level-indicator` | Safari |  |
| `default-button` | Safari Edge |  |
| `discrete-capacity-level-indicator` | Safari |  |
| `inner-spin-button` | Firefox Chrome Safari |  |
| `image-controls-button` | Safari |  |
| `list-button` | Safari | datalist |
| `listitem` | Firefox Chrome Safari Edge |  |
| `media-enter-fullscreen-button` | Chrome Safari |  |
| `media-exit-fullscreen-button` | Chrome Safari |  |
| `media-fullscreen-volume-slider` | Safari |  |
| `media-fullscreen-volume-slider-thumb` | Safari |  |
| `media-mute-button` | Chrome Safari Edge |  |
| `media-play-button` | Chrome Safari Edge |  |
| `media-overlay-play-button` | Chrome Safari |  |
| `media-return-to-realtime-button` | Safari |  |
| `media-rewind-button` | Safari |  |
| `media-seek-back-button` | Safari Edge |  |
| `media-seek-forward-button` | Safari Edge |  |
| `media-toggle-closed-captions-button` | Chrome Safari |  |
| `media-slider` | Chrome Safari Edge |  |
| `media-sliderthumb` | Chrome Safari Edge |  |
| `media-volume-slider-container` | Chrome Safari |  |
| `media-volume-slider-mute-button` | Safari |  |
| `media-volume-slider` | Chrome Safari |  |
| `media-volume-sliderthumb` | Chrome Safari |  |
| `media-controls-background` | Chrome Safari |  |
| `media-controls-dark-bar-background` | Safari |  |
| `media-controls-fullscreen-background` | Chrome Safari |  |
| `media-controls-light-bar-background` | Safari |  |
| `media-current-time-display` | Chrome Safari |  |
| `media-time-remaining-display` | Chrome Safari |  |
| `menulist-text` | Firefox Chrome Safari Edge |  |
| `menulist-textfield` | Firefox Chrome Safari Edge | The element is styled as the text field for a menulist. (Not implemented for the Windows platform) |
| `meterbar` | Firefox | Use `meter` instead. |
| `number-input` | Firefox |  |
| `progress-bar-value` | Chrome Safari |  |
| `progressbar` | Firefox | The element is styled like a progress bar. Use `progress-bar` instead |
| `progressbar-vertical` | Firefox |  |
| `range` | Firefox |  |
| `range-thumb` | Firefox |  |
| `rating-level-indicator` | Safari |  |
| `relevancy-level-indicator` | Safari |  |
| `scale-horizontal` | Firefox |  |
| `scalethumbend` | Firefox |  |
| `scalethumb-horizontal` | Firefox |  |
| `scalethumbstart` | Firefox |  |
| `scalethumbtick` | Firefox |  |
| `scalethumb-vertical` | Firefox |  |
| `scale-vertical` | Firefox |  |
| `scrollbarthumb-horizontal` | Firefox |  |
| `scrollbarthumb-vertical` | Firefox |  |
| `scrollbartrack-horizontal` | Firefox |  |
| `scrollbartrack-vertical` | Firefox |  |
| `searchfield-decoration` | Safari Edge |  |
| `searchfield-results-decoration` | Chrome Safari Edge | (Works on Chrome 51 on Windows 7) |
| `searchfield-results-button` | Safari Edge |  |
| `searchfield-cancel-button` | Chrome Safari Edge |  |
| `snapshotted-plugin-overlay` | Safari |  |
| `sheet` | None |  |
| `slider-vertical` | Chrome Safari Edge |  |
| `sliderthumb-horizontal` | Chrome Safari Edge |  |
| `sliderthumb-vertical` | Chrome Safari Edge |  |
| `textfield-multiline` | Firefox | Use `textarea` instead. |
| `-apple-pay-button` | Safari | **iOS and macOS only**. Available on the web starting in iOS 10.1 and macOS 10.12.1 |

Formal definition
-----------------

|  |  |
| --- | --- |
| Начальное значение | `none` |
| Применяется к | все элементы |
| Наследуется | нет |
| Обработка значения | как указано |
| Animation type | discrete |

### Формальный синтаксис
```

appearance =   
  none              | (en-US)  
  auto              | (en-US)  
  <compat-auto>     | (en-US)  
  <compat-special>    
  
<compat-auto> =   
  searchfield   | (en-US)  
  textarea      | (en-US)  
  checkbox      | (en-US)  
  radio         | (en-US)  
  menulist      | (en-US)  
  listbox       | (en-US)  
  meter         | (en-US)  
  progress-bar  | (en-US)  
  button          
  
<compat-special> =   
  textfield        | (en-US)  
  menulist-button    
  
```

Примеры
-------

Нижеприведённый пример показывает, как сделать элемент, выглядящий как кнопка панели инструментов в Firefox:


```css
.exampleone {
  -moz-appearance: toolbarbutton;
}
```


Смотрите также this JSFiddle в качестве примера, показывающего как вы можете использовать `appearance: none` для стилизации радио кнопок и чекбоксов.

Спецификации
------------

| Specification |
| --- |
| CSS Basic User Interface Module Level 4 # appearance-switching |

|  |  |
| --- | --- |
| Начальное значение | `none` |
| Применяется к | все элементы |
| Наследуется | нет |
| Обработка значения | как указано |
| Animation type | discrete |

Совместимость с браузерами
--------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Смотрите также
--------------

* Definition of `appearance` in CSS 3 Basic User Interface (Candidate Recommendation from 2004-05-11).
* Dropped CSS3 features from the UI spec.4