-moz-appearance (-webkit-appearance)

In diesem Artikel

Übersicht
Syntax
1. Werte
Formale Syntax
Beispiele
Spezifikationen
Browser Kompatibilität
Siehe auch

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.

Initialwert	`none` (aber dieser Wert wird im User Agent CSS überschrieben)
Anwendbar auf	alle Elemente
Vererbt	Nein
Medien	visuell
Berechneter Wert	wie angegeben
Animierbar	Nein
Kanonische Reihenfolge	die 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`	div {-moz-appearance: none; -webkit-appearance: none; color: black;} <div>Lorem</div>	Keine besondere Formatierung wird angewandt. Dies ist der Standardwert. Beachten Sie aber Bug 649849 und Bug 605985.
`button`	div {-moz-appearance: button; -webkit-appearance: button; color: black; } <div>Lorem</div>	Das Element wird wie eine Schaltfläche gezeichnet.
`button-arrow-down`	div {-moz-appearance: button-arrow-down; -webkit-appearance: button-arrow-down; color: black; } <div>Lorem</div>
`button-arrow-next`	div {-moz-appearance: button-arrow-next; -webkit-appearance: button-arrow-next; color: black; } <div>Lorem</div>
`button-arrow-previous`	div {-moz-appearance: button-arrow-previous; -webkit-appearance: button-arrow-previous; color: black; } <div>Lorem</div>
`button-arrow-up`	div {-moz-appearance: button-arrow-up; -webkit-appearance: button-arrow-up; color: black; } <div>Lorem</div>
`button-bevel`	div {-moz-appearance: button-bevel; -webkit-appearance: button-bevel; color: black; } <div>Lorem</div>
`button-focus`	div {-moz-appearance: button-focus; -webkit-appearance: button-focus; color: black; } <div>Lorem</div>
`caret`	div {-moz-appearance: caret; -webkit-appearance: caret; color: black; } <div>Lorem</div>
`checkbox`	div {-moz-appearance: checkbox; -webkit-appearance: checkbox; color: black; } <div>Lorem</div>	Das Element wird wie der innere Teil einer Checkbox gezeichnet.
`checkbox-container`	div {-moz-appearance: checkbox-container; -webkit-appearance: checkbox-container; color: black; } <div>Lorem</div>	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`	div {-moz-appearance: checkbox-label; -webkit-appearance: checkbox-label; color: black; } <div>Lorem</div>
`checkmenuitem`	div {-moz-appearance: checkmenuitem; -webkit-appearance: checkmenuitem; height: 20px; color: black; } <div>Lorem</div>
`dualbutton`	div {-moz-appearance: dualbutton; -webkit-appearance: dualbutton; color: black; } <div>Lorem</div>
`groupbox`	div {-moz-appearance: groupbox; -webkit-appearance: groupbox; color: black; } <div>Lorem</div>
`listbox`	div {-moz-appearance: listbox; -webkit-appearance: listbox; height:20px; color: black; } <div>Lorem</div>
`listitem`	div {-moz-appearance: listitem; -webkit-appearance: listitem; color: black; } <div>Lorem</div>
`menuarrow`	div {-moz-appearance: menuarrow; -webkit-appearance: menuarrow; color: black; } <div>Lorem</div>
`menubar`	div {-moz-appearance: menubar; -webkit-appearance: menubar; color: balck; } <div>Lorem</div>
`menucheckbox`	div {-moz-appearance: menucheckbox; -webkit-appearance: menucheckbox; color: black; } <div>Lorem</div>
`menuimage`	div {-moz-appearance: menuimage; -webkit-appearance: menuimage; color: black; } <div>Lorem</div>
`menuitem`	div {-moz-appearance: menuitem; -webkit-appearance: menuitem; color: black; } <div>Lorem</div>	Das Element wird wie ein Menüeintrag dargestellt, wobei der Eintrag hervorgehoben wird, wenn sich der Mauscursor darüber befindet.
`menuitemtext`	div {-moz-appearance: menuitemtext; -webkit-appearance: menuitemtext; color: black; } <div>Lorem</div>
`menulist`	div {-moz-appearance: menulist; -webkit-appearance: menulist; color: black; } <div>Lorem</div>
`menulist-button`	div {-moz-appearance: menulist-button; -webkit-appearance: menulist-button; color: black; } <div>Lorem</div>	Das Element wird wie eine Schaltfläche dargestellt, die eine Menüliste darstellt, die geöffnet werden kann.
`menulist-text`	div {-moz-appearance: menulist-text; -webkit-appearance: menulist-text; color: black; } <div>Lorem</div>
`menulist-textfield`	div {-moz-appearance: menulist-textfield; -webkit-appearance: menulist-textfield; color: black; } <div>Lorem</div>	Dieses Element wird wie ein Texteingabefeld einer Menüliste dargestellt. (Nicht für die Windows Plattform implementiert.)
`menupopup`	div {-moz-appearance: menupopup; -webkit-appearance: menupopup; color: black; } <div>Lorem</div>
`menuradio`	div {-moz-appearance: menuradio; -webkit-appearance: menuradio; color: black; } <div>Lorem</div>
`menuseparator`	div {-moz-appearance: menuseparator; -webkit-appearance: menuseparator; color: transparent; } <div>Lorem</div>
`meterbar`	div {-moz-appearance: meterbar; -webkit-appearance: meterbar; color: black; } <div>Lorem</div>	Neu in Firefox 16
`meterchunk`	div {-moz-appearance: meterchunk; -webkit-appearance: meterchunk; color: black; } <div>Lorem</div>	Neu in Firefox 16
`progressbar`	div {-moz-appearance: progressbar; -webkit-appearance: progressbar; color: black; } <div>Lorem</div>	Das Element wird wie ein Fortschrittsbalken dargestellt.
`progressbar-vertical`	div {-moz-appearance: progressbar-vertical; -webkit-appearance: preogressbar-vertical; color: transparent; } <div>Lorem</div>
`progresschunk`	div {-moz-appearance: progresschunk; -webkit-appearance: progresschunk; color: black; } <div>Lorem</div>
`progresschunk-vertical`	div {-moz-appearance: progresschunk-vertical; -webkit-appearance: progresschunk-vertical; color: black; } <div>Lorem</div>
`radio`	div {-moz-appearance: radio; -webkit-appearance: radio; color: black; } <div>Lorem</div>	Das Element wird wie der innere Teil eines Radiobuttons gezeichnet.
`radio-container`	div {-moz-appearance: radio-container; -webkit-appearance: radio-container; color: black; } <div>Lorem</div>	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`	div {-moz-appearance: radio-label; -webkit-appearance: radio-label; color: black; } <div>Lorem</div>
`radiomenuitem`	div {-moz-appearance: radiomenuitem; -webkit-appearance: radiomenuitem; color: black; } <div>Lorem</div>
`resizer`	div {-moz-appearance: resizer; -webkit-appearance: resizer; color: transparent; } <div>Lorem</div>
`resizerpanel`	div {-moz-appearance: resizerpanel; -webkit-appearance: resizerpanel; color: black; } <div>Lorem</div>
`scale-horizontal`	div {-moz-appearance: scale-horizontal; -webkit-appearance: scale-horizontal; color: transparent; } <div>Lorem</div>
`scalethumbend`	div {-moz-appearance: scalethumbend; -webkit-appearance: scalethumbend; color: black; } <div>Lorem</div>
`scalethumb-horizontal`	div {-moz-appearance: scalethumb-horizontal; -webkit-appearance: scalethumb-horizontal; color: transparent; } <div>Lorem</div>
`scalethumbstart`	div {-moz-appearance: scalethumbstart; -webkit-appearance: scalethumbstart; color: black; } <div>Lorem</div>
`scalethumbtick`	div {-moz-appearance: scalethumbtick; -webkit-appearance: scalethumbtick; color: black; } <div>Lorem</div>
`scalethumb-vertical`	div {-moz-appearance: scalethumb-vertical; -webkit-appearance: scalethumb-vertical; color: black; } <div>Lorem</div>
`scale-vertical`	div {-moz-appearance: scale-vertical; -webkit-appearance: scale-vertical; color: transparent; } <div>Lorem</div>
`scrollbarbutton-down`	div {-moz-appearance: scrollbarbutton-down; -webkit-appearance: scrollbarbutton-down; color: black; } <div>Lorem</div>
`scrollbarbutton-left`	div {-moz-appearance: scrollbarbutton-left; -webkit-appearance: scrollbarbutton-left; color: black; } <div>Lorem</div>
`scrollbarbutton-right`	div {-moz-appearance: scrollbarbutton-right; -webkit-appearance: scrollbarbutton-right; color: black; } <div>Lorem</div>
`scrollbarbutton-up`	div {-moz-appearance: scrollbarbutton-up; -webkit-appearance: scrollbarbutton-up; color: black; } <div>Lorem</div>
`scrollbarthumb-horizontal`	div {-moz-appearance: scrollbarthumb-horizontal; -webkit-appearance: scrollbarthumb-horizontal; color: black; } <div>Lorem</div>
`scrollbarthumb-vertical`	div {-moz-appearance: scrollbarthumb-vertical; -webkit-appearance: scrollbarthumb-vertical; color: black; } <div>Lorem</div>
`scrollbartrack-horizontal`	div {-moz-appearance: scrollbartrack-horizontal; -webkit-appearance: scrollbartrack-horizontal; color: black; } <div>Lorem</div>
`scrollbartrack-vertical`	div {-moz-appearance: scrollbartrack-vertical; -webkit-appearance: scrollbarbartrack-vertical; color: black; } <div>Lorem</div>
`searchfield`	div {-moz-appearance: searchfield; -webkit-appearance: searchfield; color: black; } <div>Lorem</div>
`separator`	div {-moz-appearance: separator; -webkit-appearance: separator; color: transparent; } <div>Lorem</div>
`sheet`	div {-moz-appearance: sheet; -webkit-appearance: sheet; color: black; } <div>Lorem</div>
`spinner`	div {-moz-appearance: spinner; -webkit-appearance: spinner; color: transparent; } <div>Lorem</div>
`spinner-downbutton`	div {-moz-appearance: spinner-downbutton; -webkit-appearance: spinner-downbutton; color: black; } <div>Lorem</div>
`spinner-textfield`	div {-moz-appearance: spinner-textfield; -webkit-appearance: spinner-textfield; color: black; } <div>Lorem</div>
`spinner-upbutton`	div {-moz-appearance: spinner-upbutton; -webkit-appearance: spinner-upbutton; color: black; } <div>Lorem</div>
`splitter`	div {-moz-appearance: splitter; -webkit-appearance: splitter; color: transparent; } <div>Lorem</div>
`statusbar`	div {-moz-appearance: statusbar; -webkit-appearance: statusbar; color: black; } <div>Lorem</div>
`statusbarpanel`	div {-moz-appearance: statusbarpanel; -webkit-appearance: statusbarpanel; color: black; } <div>Lorem</div>
`tab`	div {-moz-appearance: tab; -webkit-appearance: tab; height: 20px; color: black; } <div>Lorem</div>
`tabpanel`	div {-moz-appearance: tabpanel; -webkit-appearance: tabpanel; color: black; } <div>Lorem</div>
`tabpanels`	div {-moz-appearance: tabpanels; -webkit-appearance: tabpanels; color: black; } <div>Lorem</div>
`tab-scroll-arrow-back`	div {-moz-appearance: tab-scroll-arrow-back; -webkit-appearance: tab-scroll-arrow-back; color: black; } <div>Lorem</div>
`tab-scroll-arrow-forward`	div {-moz-appearance: tab-scroll-arrow-forward; -webkit-appearance: tab-scroll-arrow-forward; color: black; } <div>Lorem</div>
`textfield`	div {-moz-appearance: textfield; -webkit-appearance: textfield; color: black; } <div>Lorem</div>
`textfield-multiline`	div {-moz-appearance: textfield-multiline; -webkit-appearance: textfield-multiline; color: black; } <div>Lorem</div>
`toolbar`	div {-moz-appearance: toolbar; -webkit-appearance: toolbar; color: black; } <div>Lorem</div>
`toolbarbutton`	div {-moz-appearance: toolbarbutton; -webkit-appearance: toolbarbutton; color: black; } <div>Lorem</div>
`toolbarbutton-dropdown`	div {-moz-appearance: toolbarbutton-dropdown; -webkit-appearance: toolbarbutton-dropdown; color: black; } <div>Lorem</div>
`toolbargripper`	div {-moz-appearance: toolbargripper; -webkit-appearance: toolbargripper; color: black; } <div>Lorem</div>
`toolbox`	div {-moz-appearance: toolbox; -webkit-appearance: toolbox; color: black; } <div>Lorem</div>
`tooltip`	div {-moz-appearance: tooltip; -webkit-appearance: tooltip; color: black; } <div>Lorem</div>
`treeheader`	div {-moz-appearance: treeheader; -webkit-appearance: treeheader; color: black; } <div>Lorem</div>
`treeheadercell`	div {-moz-appearance: treeheadercell; -webkit-appearance: treeheadercell; height:20px; color: black; } <div>Lorem</div>
`treeheadersortarrow`	div {-moz-appearance: treeheadersortarrow; -webkit-appearance: treeheadersortarrow; color: black; } <div>Lorem</div>
`treeitem`	div {-moz-appearance: treeitem; -webkit-appearance: treeitem; color: black; } <div>Lorem</div>
`treeline`	div {-moz-appearance: treeline; -webkit-appearance: treeline; color: black; } <div>Lorem</div>
`treetwisty`	div {-moz-appearance: treetwisty; -webkit-appearance: treetwisty; color: transparent; } <div>Lorem</div>
`treetwistyopen`	div {-moz-appearance: treetwistyopen; -webkit-appearance: treetwistyopen; color: transparent; } <div>Lorem</div>
`treeview`	div {-moz-appearance: treeview; -webkit-appearance: treeview; color: black; } <div>Lorem</div>
`-moz-mac-unified-toolbar`	div {-moz-appearance: -moz-mac-unified-toolbar; color: black; } <div>Lorem</div>	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`	div {-moz-appearance: -moz-win-borderless-glass; color: black; } <div>Lorem</div>	Nur Windows Vista und neuer. Dieser Stil wendet den Aero Glass Effekt - aber ohne einen Rahmen - auf das Element an.
`-moz-win-browsertabbar-toolbox`	div {-moz-appearance: -moz-win-browsertabbar-toolbox; color: black; } <div>Lorem</div>	Nur Windows Vista und neuer. Dieser Toolboxstil ist dazu gedacht, um für die Tableiste in einem Browser verwendet zu werden.
`-moz-win-communicationstext`	div {-moz-appearance: -moz-win-communicationstext; color: black; } <div>Lorem</div>
`-moz-win-communications-toolbox`	div {-moz-appearance: -moz-win-communications-toolbox; color: black; } <div>Lorem</div>	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`	div {-moz-appearance: -moz-win-exclude-glass; color: black; } <div>Lorem</div>	Nur Windows Vista und neuer. Dieser Stil wird dazu verwendet, um den Aero Glass Effekt für das Element auszuschließen.
`-moz-win-glass`	div {-moz-appearance: -moz-win-glass; color: black; } <div>Lorem</div>	Nur Windows Vista und neuer. Dieser Stil wendet den Aero Glass Effekt auf das Element an.
`-moz-win-mediatext`	div {-moz-appearance: -moz-win-mediatext; color: black; } <div>Lorem</div>
`-moz-win-media-toolbox`	div {-moz-appearance: -moz-win-media-toolbox; color: black; } <div>Lorem</div>	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`	div {-moz-appearance: -moz-window-button-box; color: black; } <div>Lorem</div>
`-moz-window-button-box-maximized`	div {-moz-appearance: -moz-window-button-box-maximized; color: black; } <div>Lorem</div>
`-moz-window-button-close`	div {-moz-appearance: -moz-window-button-close; color: black; } <div>Lorem</div>
`-moz-window-button-maximize`	div {-moz-appearance: -moz-window-button-maximize; color: black; } <div>Lorem</div>
`-moz-window-button-minimize`	div {-moz-appearance: -moz-window-button-minimize; color: black; } <div>Lorem</div>
`-moz-window-button-restore`	div {-moz-appearance: -moz-window-button-restore; color: black; } <div>Lorem</div>
`-moz-window-frame-bottom`	div {-moz-appearance: -moz-window-frame-bottom; color: black; } <div>Lorem</div>
`-moz-window-frame-left`	div {-moz-appearance: -moz-window-frame-left; color: black; } <div>Lorem</div>
`-moz-window-frame-right`	div {-moz-appearance: -moz-window-frame-right; color: black; } <div>Lorem</div>
`-moz-window-titlebar`	div {-moz-appearance: -moz-window-titlebar; color: black; } <div>Lorem</div>
`-moz-window-titlebar-maximized`	div {-moz-appearance: -moz-window-titlebar-maximized; color: black; } <div>Lorem</div>

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.

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

Definition von appearance in CSS 3 Basic User Interface (Candidate Recommendation vom 2004-05-11), veraltet (Die appearance Eigenschaft wurde in neueren Versionen dieser Spezifikation verworfen.)
Verworfene CSS3 Features der UI Spezifikation

Schlagwörter des Dokuments und Mitwirkende

Schlagwörter:

Mitwirkende an dieser Seite: teoli, Sebastianz, bee8bit

Zuletzt aktualisiert von: teoli, 20.12.2015, 02:30:17

Siehe auch