Join MDN and developers like you at Mozilla's View Source conference, 12-14 September in Berlin, Germany. Learn more at https://viewsourceconf.org

-moz-appearance (-webkit-appearance)

Kein Standard
Diese Funktion entspricht nicht dem Standard und ist nicht Teil der Standardisierung. Diese Funktion darf nicht in Webseiten, die via das Internet zugänglich sind, benutzt werden: Sie wird nicht für alle Nutzer funktionieren. Es kann zu umfangreichen Inkompatibilitäten zwischen verschiedenen Implementierungen kommen und die Funktionsweise oder Eigenschaften könnten in der Zukunft verändert werden.

Übersicht

Die CSS-Eigenschaft -moz-appearance wird von Gecko (Firefox) dazu verwendet, um ein Element mit dem nativen Stil der Plattform anzuzeigen, wie er im Betriebssystem eingestellt ist.

Diese Eigenschaft wird häufig in XUL-Stylesheets verwendet, um individuelle Eingabefelder passend zur Plattform zu gestalten. Auch die XBL-Implementierungen der in Mozilla enthaltenen Bedienelemente verwenden diese Eigenschaft.

Verwende diese Eigenschaft nicht für Websites: Sie entspricht nicht den Webstandards und ihre Auswirkungen unterscheiden sich von einem Browser zum anderen. Sogar der Wert none hat in den verschiedenen Browsern kein einheitliches Verhalten für alle Formularelemente, und teilweise wird sie überhaupt nicht unterstützt.

Initialwertnone (aber dieser Wert wird im User Agent CSS überschrieben)
Anwendbar aufalle Elemente
VererbtNein
Medienvisuell
Berechneter Wertwie angegeben
AnimierbarNein
Kanonische Reihenfolgedie eindeutige Reihenfolge definiert durch die formale Grammatik

Syntax

/* Partielle Liste verfügbarer Werte in Gecko */
-moz-appearance: none;
-moz-appearance: button;
-moz-appearance: checkbox;
-moz-appearance: scrollbarbutton-up;

/* Partielle Liste verfügbarer Werte in WebKit/Blink */
-webkit-appearance: none;
-webkit-appearance: button;
-webkit-appearance: checkbox;
-webkit-appearance: scrollbarbutton-up;

Werte

<appearance> ist eines der folgenden Schlüsselwörter:

Wert Demo Beschreibung
none Keine besondere Formatierung wird angewandt. Dies ist der Standardwert. Beachten Sie aber Bug 649849 und Bug 605985.
button Das Element wird wie eine Schaltfläche gezeichnet.
button-arrow-down  
button-arrow-next  
button-arrow-previous  
button-arrow-up  
button-bevel  
button-focus  
caret  
checkbox Das Element wird wie der innere Teil einer Checkbox gezeichnet.
checkbox-container Das Element wird wie ein Container für eine Checkbox gezeichnet, was einen vorilluminierenden Hintergrundeffekt unter bestimmten Plattformen beinhaltet. Normalerweise beinhaltet er ein Label und eine Checkbox.
checkbox-label  
checkmenuitem  
dualbutton  
groupbox  
listbox  
listitem  
menuarrow  
menubar  
menucheckbox  
menuimage  
menuitem Das Element wird wie ein Menüeintrag dargestellt, wobei der Eintrag hervorgehoben wird, wenn sich der Mauscursor darüber befindet.
menuitemtext  
menulist  
menulist-button Das Element wird wie eine Schaltfläche dargestellt, die eine Menüliste darstellt, die geöffnet werden kann.
menulist-text  
menulist-textfield Dieses Element wird wie ein Texteingabefeld einer Menüliste dargestellt. (Nicht für die Windows Plattform implementiert.)
menupopup  
menuradio  
menuseparator  
meterbar Neu in Firefox 16
meterchunk Neu in Firefox 16
progressbar Das Element wird wie ein Fortschrittsbalken dargestellt.
progressbar-vertical  
progresschunk  
progresschunk-vertical  
radio Das Element wird wie der innere Teil eines Radiobuttons gezeichnet.
radio-container Das Element wird wie ein Container für einen Radiobutton gezeichnet, was einen vorilluminierenden Hintergrundeffekt unter bestimmten Plattformen beinhaltet. Normalerweise beinhaltet er ein Label und einen Radiobutton.
radio-label  
radiomenuitem  
resizer  
resizerpanel  
scale-horizontal  
scalethumbend  
scalethumb-horizontal  
scalethumbstart  
scalethumbtick  
scalethumb-vertical  
scale-vertical  
scrollbarbutton-down  
scrollbarbutton-left  
scrollbarbutton-right  
scrollbarbutton-up  
scrollbarthumb-horizontal  
scrollbarthumb-vertical  
scrollbartrack-horizontal  
scrollbartrack-vertical  
searchfield  
separator  
sheet  
spinner  
spinner-downbutton  
spinner-textfield  
spinner-upbutton  
splitter  
statusbar  
statusbarpanel  
tab  
tabpanel  
tabpanels  
tab-scroll-arrow-back  
tab-scroll-arrow-forward  
textfield  
textfield-multiline  
toolbar  
toolbarbutton  
toolbarbutton-dropdown  
toolbargripper  
toolbox  
tooltip  
treeheader  
treeheadercell  
treeheadersortarrow  
treeitem  
treeline  
treetwisty  
treetwistyopen  
treeview  
-moz-mac-unified-toolbar Nur Mac OS X. Dies ermöglicht die Darstellung von Toolbar und Titelleiste unter Verwendung des einheitlichen Toolbarstils, wie er in  Anwendungen unter Mac OS X 10.4 und neuer zu sehen ist.
-moz-win-borderless-glass Nur Windows Vista und neuer. Dieser Stil wendet den Aero Glass Effekt - aber ohne einen Rahmen - auf das Element an.
-moz-win-browsertabbar-toolbox Nur Windows Vista und neuer. Dieser Toolboxstil ist dazu gedacht, um für die Tableiste in einem Browser verwendet zu werden.
-moz-win-communicationstext  
-moz-win-communications-toolbox Nur Windows Vista und neuer. Dieser Toolboxstil ist dazu gedacht, in Kommunikations- und Produktivitätsanwendungen verwendet zu werden. Die entsprechende Vordergrundfarbe ist -moz-win-communicationstext.
-moz-win-exclude-glass Nur Windows Vista und neuer. Dieser Stil wird dazu verwendet, um den Aero Glass Effekt für das Element auszuschließen.
-moz-win-glass Nur Windows Vista und neuer. Dieser Stil wendet den Aero Glass Effekt auf das Element an.
-moz-win-mediatext  
-moz-win-media-toolbox Nur Windows Vista und neuer. Dieser Toolboxstil ist dazu gedacht, um in Anwendungen verwendet zu werden, die Medienobjekte verwalten. Die Entsprechende Vordergrundfarbe ist -moz-win-mediatext.
-moz-window-button-box  
-moz-window-button-box-maximized  
-moz-window-button-close  
-moz-window-button-maximize  
-moz-window-button-minimize  
-moz-window-button-restore  
-moz-window-frame-bottom  
-moz-window-frame-left  
-moz-window-frame-right  
-moz-window-titlebar  
-moz-window-titlebar-maximized  

Formale Syntax

none | button | button-arrow-down | button-arrow-next | button-arrow-previous | button-arrow-up | button-bevel | button-focus | caret | checkbox | checkbox-container | checkbox-label | checkmenuitem | dualbutton | groupbox | listbox | listitem | menuarrow | menubar | menucheckbox | menuimage | menuitem | menuitemtext | menulist | menulist-button | menulist-text | menulist-textfield | menupopup | menuradio | menuseparator | meterbar | meterchunk | progressbar | progressbar-vertical | progresschunk | progresschunk-vertical | radio | radio-container | radio-label | radiomenuitem | range | range-thumb | resizer | resizerpanel | scale-horizontal | scalethumbend | scalethumb-horizontal | scalethumbstart | scalethumbtick | scalethumb-vertical | scale-vertical | scrollbarbutton-down | scrollbarbutton-left | scrollbarbutton-right | scrollbarbutton-up | scrollbarthumb-horizontal | scrollbarthumb-vertical | scrollbartrack-horizontal | scrollbartrack-vertical | searchfield | separator | sheet | spinner | spinner-downbutton | spinner-textfield | spinner-upbutton | splitter | statusbar | statusbarpanel | tab | tabpanel | tabpanels | tab-scroll-arrow-back | tab-scroll-arrow-forward | textfield | textfield-multiline | toolbar | toolbarbutton | toolbarbutton-dropdown | toolbargripper | toolbox | tooltip | treeheader | treeheadercell | treeheadersortarrow | treeitem | treeline | treetwisty | treetwistyopen | treeview | -moz-mac-unified-toolbar | -moz-win-borderless-glass | -moz-win-browsertabbar-toolbox | -moz-win-communicationstext | -moz-win-communications-toolbox | -moz-win-exclude-glass | -moz-win-glass | -moz-win-mediatext | -moz-win-media-toolbox | -moz-window-button-box | -moz-window-button-box-maximized | -moz-window-button-close | -moz-window-button-maximize | -moz-window-button-minimize | -moz-window-button-restore | -moz-window-frame-bottom | -moz-window-frame-left | -moz-window-frame-right | -moz-window-titlebar | -moz-window-titlebar-maximized

Beispiele

.exampleone {
	-moz-appearance: toolbarbutton;
}

Spezifikationen

The appearance property is currently not present in any newer CSS specification.

Browser Kompatibilität

Merkmal Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Grundlegende Unterstützung 1.0 1.0 (1.7 oder früher)-moz[1] Nicht unterstützt ? 3.0-webkit
Feature Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
Grundlegende Unterstützung ? 1.0 (1.0) 11.0-webkit[2] ? ?

[1] Nicht vollständig unterstützt.

[2] Nur die Werte none, button, und textfield werden unterstützt. Siehe die Dokumentation auf MSDN.

Siehe auch

Schlagwörter des Dokuments und Mitwirkende

Schlagwörter: 
 Mitwirkende an dieser Seite: teoli, Sebastianz, bee8bit
 Zuletzt aktualisiert von: teoli,