appearance (-moz-appearance, -webkit-appearance)
Интерактивный пример
Experimental: Это экспериментальная технология
Так как спецификация этой технологии ещё не стабилизировалась, смотрите таблицу совместимости по поводу использования в различных браузерах. Также заметьте, что синтаксис и поведение экспериментальной технологии может измениться в будущих версиях браузеров, вслед за изменениями спецификации.
CSS-свойство -moz-appearance
используется в Gecko (Firefox) для отображения элемента, используя базовые стили платформы на основе темы операционной системы.
Свойство -webkit-appearance
используется в браузерах WebKit-based (например, Safari) и Blink-based (например, Chrome, Opera) для того же эффекта. Заметьте, что Firefox и Edge также поддерживают -webkit-appearance
, для обеспечения совместимости.
Это свойство часто используется в таблицах стилей XUL для разработки пользовательских виджетов в стиле, соответствующем платформе. Оно, также, используется в реализации XBL виджетов, которые поставляются с платформой Mozilla.
Примечание о совместимости: Если вы хотите использовать это свойство на веб-сайте, вы должны тестировать его очень осторожно. Хотя оно поддерживается в большинстве современных браузерах, его реализация широко варьируется. В старых браузерах, даже ключевое слово none
не окажет одинакового эффекта на все элементы формы различных браузеров, а некоторые его совсем не поддерживают. Различия меньше в более современных браузерах.
Синтаксис
/* 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 | Demo | Browser | Description |
---|---|---|---|
none |
Firefox Chrome Safari Edge | No special styling is applied. This is the default. | |
auto
Experimental
|
None | The user agent selects the appropriate special styling based on the element. Acts as none on elements with no special styling. |
|
attachment
Non-Standard
|
Safari | ||
borderless-attachment
Non-Standard
|
Safari | ||
button
Non-Standard
|
Firefox Chrome Safari Edge | The element is drawn like a button. | |
button-arrow-down
Non-Standard
|
Firefox | Removed in FF 64 | |
button-arrow-next
Non-Standard
|
Firefox | Removed in FF 64 | |
button-arrow-previous
Non-Standard
|
Firefox | Removed in FF 64 | |
button-arrow-up
Non-Standard
|
Firefox | Removed in FF 64 | |
button-bevel
Non-Standard
|
Firefox Chrome Safari Edge | ||
button-focus
Non-Standard
|
Firefox | Removed in FF 64 | |
caps-lock-indicator
Non-Standard
|
Safari Edge | ||
caret
Non-Standard
|
Firefox Chrome Safari Edge | ||
checkbox
Non-Standard
|
Firefox Chrome Safari Edge | The element is drawn like a checkbox, including only the actual "checkbox" portion. | |
checkbox-container
Non-Standard
|
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
Non-Standard
|
Firefox | ||
checkmenuitem
Non-Standard
|
Firefox | ||
color-well
Non-Standard
|
Safari | input type=color |
|
continuous-capacity-level-indicator
Non-Standard
|
Safari | ||
default-button
Non-Standard
|
Safari Edge | ||
discrete-capacity-level-indicator
Non-Standard
|
Safari | ||
dualbutton
Non-Standard
|
Firefox | Removed in FF 64 | |
groupbox
Non-Standard
|
Firefox | Removed in FF 64 | |
inner-spin-button
Non-Standard
|
Firefox Chrome Safari | ||
image-controls-button
Non-Standard
|
Safari | ||
list-button
Non-Standard
|
Safari | datalist | |
listbox
Non-Standard
|
Firefox Chrome Safari Edge | ||
listitem
Non-Standard
|
Firefox Chrome Safari Edge | ||
media-enter-fullscreen-button
Non-Standard
|
Chrome Safari | ||
media-exit-fullscreen-button
Non-Standard
|
Chrome Safari | ||
media-fullscreen-volume-slider
Non-Standard
|
Safari | ||
media-fullscreen-volume-slider-thumb
Non-Standard
|
Safari | ||
media-mute-button
Non-Standard
|
Chrome Safari Edge | ||
media-play-button
Non-Standard
|
Chrome Safari Edge | ||
media-overlay-play-button
Non-Standard
|
Chrome Safari | ||
media-return-to-realtime-button
Non-Standard
|
Safari | ||
media-rewind-button
Non-Standard
|
Safari | ||
media-seek-back-button
Non-Standard
|
Safari Edge | ||
media-seek-forward-button
Non-Standard
|
Safari Edge | ||
media-toggle-closed-captions-button
Non-Standard
|
Chrome Safari | ||
media-slider
Non-Standard
|
Chrome Safari Edge | ||
media-sliderthumb
Non-Standard
|
Chrome Safari Edge | ||
media-volume-slider-container
Non-Standard
|
Chrome Safari | ||
media-volume-slider-mute-button
Non-Standard
|
Safari | ||
media-volume-slider
Non-Standard
|
Chrome Safari | ||
media-volume-sliderthumb
Non-Standard
|
Chrome Safari | ||
media-controls-background
Non-Standard
|
Chrome Safari | ||
media-controls-dark-bar-background
Non-Standard
|
Safari | ||
media-controls-fullscreen-background
Non-Standard
|
Chrome Safari | ||
media-controls-light-bar-background
Non-Standard
|
Safari | ||
media-current-time-display
Non-Standard
|
Chrome Safari | ||
media-time-remaining-display
Non-Standard
|
Chrome Safari | ||
menuarrow
Non-Standard
|
Firefox | Removed in Firefox 64 | |
menubar
Non-Standard
|
Firefox | Removed in Firefox 64 | |
menucheckbox
Non-Standard
|
Firefox | Removed in Firefox 64 | |
menuimage
Non-Standard
|
Firefox | Removed in Firefox 64 | |
menuitem
Non-Standard
|
Firefox | Removed in Firefox 64, the element was styled as menu item, item is highlighted when hovered. | |
menuitemtext
Non-Standard
|
Firefox | Removed in FF 64 | |
menulist
Non-Standard
|
Firefox Chrome Safari Edge | ||
menulist-button
Non-Standard
|
Firefox Chrome Safari Edge | The element is styled as a button that would indicate a menulist can be opened. | |
menulist-text
Non-Standard
|
Firefox Chrome Safari Edge | ||
menulist-textfield
Non-Standard
|
Firefox Chrome Safari Edge | The element is styled as the text field for a menulist. (Not implemented for the Windows platform) | |
menupopup
Non-Standard
|
Firefox | Removed in Firefox 64 | |
menuradio
Non-Standard
|
Firefox | Removed in Firefox 64 | |
menuseparator
Non-Standard
|
Firefox | Removed in Firefox 64 | |
meter |
Chrome Safari Firefox | New in Fx 64 | |
meterbar
Non-Standard
|
Firefox | New in Fx 16. Use meter instead |
|
meterchunk
Non-Standard
|
Firefox | New in Fx 16. Removed in Firefox 64. | |
number-input
Non-Standard
|
Firefox | ||
progress-bar |
Chrome Safari Firefox | New in Fx 64 | |
progress-bar-value
Non-Standard
|
Chrome Safari | ||
progressbar
Non-Standard
|
Firefox | The element is styled like a progress bar. Use progress-bar instead |
|
progressbar-vertical
Non-Standard
|
Firefox | ||
progresschunk
Non-Standard
|
Firefox | Removed in Firefox 64. | |
progresschunk-vertical
Non-Standard
|
Firefox | Removed in Firefox 64. | |
push-button
Non-Standard
|
Chrome Safari Edge | ||
radio
Non-Standard
|
Firefox Chrome Safari Edge | The element is drawn like a radio button, including only the actual "radio button" portion. | |
radio-container
Non-Standard
|
Firefox | Removed in Firefox 64, the element is drawn like a container for a radio button, which may include a prelighting background effect under certain platforms. Normally it would contain a label and a radio button. | |
radio-label
Non-Standard
|
Firefox | Removed in Firefox 64. | |
radiomenuitem
Non-Standard
|
Firefox | Removed in Firefox 64. | |
range
Non-Standard
|
Firefox | ||
range-thumb
Non-Standard
|
Firefox | ||
rating-level-indicator
Non-Standard
|
Safari | ||
resizer
Non-Standard
|
Firefox | Removed in Firefox 63 | |
resizerpanel
Non-Standard
|
Firefox | Removed in Firefox 63. | |
scale-horizontal
Non-Standard
|
Firefox | ||
scalethumbend
Non-Standard
|
Firefox | ||
scalethumb-horizontal
Non-Standard
|
Firefox | ||
scalethumbstart
Non-Standard
|
Firefox | ||
scalethumbtick
Non-Standard
|
Firefox | ||
scalethumb-vertical
Non-Standard
|
Firefox | ||
scale-vertical
Non-Standard
|
Firefox | ||
scrollbarbutton-down
Non-Standard
|
Firefox | Removed in Firefox 63. | |
scrollbarbutton-left
Non-Standard
|
Firefox | Removed in Firefox 63. | |
scrollbarbutton-right
Non-Standard
|
Firefox | Removed in Firefox 63. | |
scrollbarbutton-up
Non-Standard
|
Firefox | Removed in Firefox 63. | |
scrollbarthumb-horizontal
Non-Standard
|
Firefox | ||
scrollbarthumb-vertical
Non-Standard
|
Firefox | ||
scrollbartrack-horizontal
Non-Standard
|
Firefox | ||
scrollbartrack-vertical
Non-Standard
|
Firefox | ||
searchfield
Non-Standard
|
Firefox Chrome Safari Edge | ||
searchfield-decoration
Non-Standard
|
Safari Edge | ||
searchfield-results-decoration
Non-Standard
|
Safari Edge | ||
searchfield-results-button
Non-Standard
|
Safari Edge | ||
searchfield-cancel-button
Non-Standard
|
Chrome Safari Edge | ||
snapshotted-plugin-overlay
Non-Standard
|
Safari | ||
separator
Non-Standard
|
Firefox | Removed in Firefox 64. | |
sheet
Non-Standard
|
None | ||
slider-horizontal
Non-Standard
|
Chrome Safari Edge | ||
slider-vertical
Non-Standard
|
Chrome Safari Edge | ||
sliderthumb-horizontal
Non-Standard
|
Chrome Safari Edge | ||
sliderthumb-vertical
Non-Standard
|
Chrome Safari Edge | ||
spinner
Non-Standard
|
Firefox | Removed in Firefox 64. | |
spinner-downbutton
Non-Standard
|
Firefox | Removed in Firefox 64. | |
spinner-textfield
Non-Standard
|
Firefox | Removed in Firefox 64. | |
spinner-upbutton
Non-Standard
|
Firefox | Removed in Firefox 64. | |
splitter
Non-Standard
|
Firefox | Removed in Firefox 64. | |
square-button
Non-Standard
|
Chrome Safari Edge | ||
statusbar
Non-Standard
|
Firefox | Removed in Firefox 64. | |
statusbarpanel
Non-Standard
|
Firefox | Removed in Firefox 64. | |
tab
Non-Standard
|
Firefox | Removed in Firefox 64 | |
tabpanel
Non-Standard
|
Firefox | Removed in Firefox 64. | |
tabpanels
Non-Standard
|
Firefox | Removed in Firefox 64 | |
tab-scroll-arrow-back
Non-Standard
|
Firefox | Removed in Firefox 64. | |
tab-scroll-arrow-forward
Non-Standard
|
Firefox | Removed in Firefox 64. | |
textarea |
Firefox Chrome Safari Edge | ||
textfield
Non-Standard
|
Firefox Chrome Safari Edge | ||
textfield-multiline
Non-Standard
|
Firefox | Use textarea instead |
|
toolbar
Non-Standard
|
Firefox | Removed in Firefox 64. | |
toolbarbutton
Non-Standard
|
Firefox | Removed in Firefox 64. | |
toolbarbutton-dropdown
Non-Standard
|
Firefox | Removed in Firefox 64. | |
toolbargripper
Non-Standard
|
Firefox | Removed in Firefox 64. | |
toolbox
Non-Standard
|
Firefox | Removed in Firefox 64. | |
tooltip
Non-Standard
|
Firefox | Removed in Firefox 64. | |
treeheader
Non-Standard
|
Firefox | Removed in Firefox 64. | |
treeheadercell
Non-Standard
|
Firefox | Removed in Firefox 64. | |
treeheadersortarrow
Non-Standard
|
Firefox | Removed in Firefox 64. | |
treeitem
Non-Standard
|
Firefox | Removed in Firefox 64. | |
treeline
Non-Standard
|
Firefox | Removed in Firefox 64. | |
treetwisty
Non-Standard
|
Firefox | Removed in Firefox 64. | |
treetwistyopen
Non-Standard
|
Firefox | Removed in Firefox 64. | |
treeview
Non-Standard
|
Firefox | Removed in Firefox 64. | |
relevancy-level-indicator
Non-Standard
|
Safari | ||
-moz-win-borderless-glass
Non-Standard
|
Firefox | Removed in Firefox 64. This style applies the Aero Glass effect -- but without a border -- to the element. | |
-moz-win-browsertabbar-toolbox
Non-Standard
|
Firefox | Removed in Firefox 64. This toolbox style is meant to be used for the tab bar in a browser. | |
-moz-win-communicationstext
Non-Standard
|
Firefox | Removed in Firefox 64. | |
-moz-win-communications-toolbox
Non-Standard
|
Firefox | Removed in Firefox 64. This toolbox style is meant to be used in communications and productivity applications. Corresponding foreground color is -moz-win-communicationstext . |
|
-moz-win-exclude-glass
Non-Standard
|
Firefox | Removed in Firefox 64. This styles is used to exclude the Aero Glass effect on the element. | |
-moz-win-glass
Non-Standard
|
Firefox | Removed in Firefox 64. This style applies the Aero Glass effect to the element. | |
-moz-win-media-toolbox
Non-Standard
|
Firefox | Removed in Firefox 64. This toolbox style is meant to be used in applications that manage media objects. Corresponding foreground color is -moz-win-mediatext . |
|
-moz-window-button-box
Non-Standard
|
Firefox | Removed in Firefox 64. | |
-moz-window-button-box-maximized
Non-Standard
|
Firefox | Removed in Firefox 64. | |
-moz-window-button-close
Non-Standard
|
Firefox | Removed in Firefox 64. | |
-moz-window-button-maximize
Non-Standard
|
Firefox | Removed in Firefox 64. | |
-moz-window-button-minimize
Non-Standard
|
Firefox | Removed in Firefox 64. | |
-moz-window-button-restore
Non-Standard
|
Firefox | Removed in Firefox 64. | |
-moz-window-frame-bottom
Non-Standard
|
Firefox | Removed in Firefox 64. | |
-moz-window-frame-left
Non-Standard
|
Firefox | Removed in Firefox 64. | |
-moz-window-frame-right
Non-Standard
|
Firefox | Removed in Firefox 64. | |
-moz-window-titlebar
Non-Standard
|
Firefox | Removed in Firefox 64. | |
-moz-window-titlebar-maximized
Non-Standard
|
Firefox | Removed in Firefox 64. | |
-apple-pay-button
Non-Standard
|
Safari | iOS and macOS only. Available on the web starting in iOS 10.1 and macOS 10.12.1 |
Формальный синтаксис
appearance =
none | (en-US)
auto | (en-US)
<compat-auto> | (en-US)
<compat-special>
<compat-auto> =
searchfield | (en-US)
textarea | (en-US)
push-button | (en-US)
slider-horizontal | (en-US)
checkbox | (en-US)
radio | (en-US)
square-button | (en-US)
menulist | (en-US)
listbox | (en-US)
meter | (en-US)
progress-bar | (en-US)
button
<compat-special> =
textfield | (en-US)
menulist-button
Примеры
Нижеприведённый пример показывает, как сделать элемент, выглядящий как кнопка панели инструментов в Firefox:
.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
Смотрите также
- Definition of
appearance
in CSS 3 Basic User Interface (Candidate Recommendation from 2004-05-11). - Dropped CSS3 features from the UI spec.4