CSS-Eigenschaft appearance

Die CSS-Eigenschaft appearance wird verwendet, um ein Element mit einem plattformneutralen Styling anzuzeigen, das auf dem Design des Betriebssystems der Benutzer basiert.

Die CSS-Eigenschaft -moz-appearance wird in Gecko (Firefox) verwendet, um ein Element mit plattformnativem Styling aufgrund des Designs des Betriebssystems anzuzeigen.

Die CSS-Eigenschaft -webkit-appearance ist eine proprietäre CSS-Erweiterung, die von der WebKit-Browserengine unterstützt wird. WebKit-Erweiterungen enthalten das Präfix -webkit-, was bedeutet, dass sie zum Open-Source-Framework WebKit gehören.

Obwohl die Eigenschaft -webkit-appearance nicht Teil der offiziellen W3C CSS-Spezifikation ist, ist sie für Browser konzipiert, die von der WebKit-Browserengine unterstützt werden, wie Apple Safari und Google Chrome.

Das ist eine experimentelle Technologie.
Anfangswert auto
Gilt für Alle Elemente
Geerbt Nein
Animierbar Ja
Version CSS3
DOM Syntax object.style.Appearance = "none";

Syntax

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;

Beispiel

<!DOCTYPE html>
<html>
  <head>
    <title>Der Titel des Dokuments</title>
    <style>
      div {
      width: 80px;
      height: 25px;
      text-align: center;
      -webkit-appearance: button; 
      -moz-appearance: button; 
      appearance: button; 
      }
    </style>
  <body>
    <h2>Ein Beispiel für die Eigenschaft appearance</h2>
    <p>Es ist ein...</p>
    <div>
    Button?</div
    </head>
  </body>

Werte

Wert Beschreibung
none Voreingestellter Wert. Keine spezielle Styling wird angewandt.
auto Der Benutz wählt die passende auf dem Element gestützte Styling aus. Auf den Elementen ohne spezielle Formgebung beeinflusst als der Wert none.
icon Ein kleines Bild, das ein Objekt darstellt, häufig mit einem Namen oder einer Bezeichnung.
window Ein Ansichtsfenster, eine gerahmte Oberfläche, durch die Objekte und Inhalte für die Benutzer zur Verfügung gestellt werden.
button Ein kleines Objekt, das normalerweise mit Text beschriftet ist und eine Benutzerauswahl darstellt.
menu Eine Reihe von Optionen, aus denen der Benutzer auswählen kann, möglicherweise mehrere gleichzeitig. Es gibt verschiedene Arten von Menüs.
field Ein Bereich, in dem ein Benutzer einen Wert eingeben oder bearbeiten kann, normalerweise über eine Tastatur. Es gibt mehrere Spezialfelder.
desktop Ein Fenster, das ein System als Ganzes darstellt und häufig andere Fenster enthält.
workspace Ein Fenster, in dem ein Projekt oder eine Anwendung dargestellt wird, die möglicherweise andere Fenster enthält, normalerweise mit einer Titelleiste, in der der Name des Projekts oder der Anwendung angezeigt wird.
document Ein Fenster, das zur Darstellung eines Benutzerdokuments verwendet wird, typischerweise mit einer Titelleiste, die seinen Namen anzeigt. Kann auch verwendet werden, um Ordner oder Verzeichnisse in einem Dateisystem darzustellen.
tooltip Ein Fenster, in dem vorübergehend Informationen oder Hilfe zu einem Objekt angezeigt werden. Wird in den CSS2-Systemfarben auch als "info" bezeichnet.
dialogue Ein Fenster, in dem eine Benachrichtigung oder Alternativen präsentiert werden, die der Benutzer im Rahmen einer vom Benutzer durchgeführten Aktion auswählen kann. In den CSS2-Systemschriften wird auch "message-box" genannt.
push-button Eine Taste, die von einem Rand umgeben ist, wird oft so abgeschrägt, dass sie dreidimensional erscheint, als ob sie angehoben wäre. Wird auch "caption" in CSS2 genannt.
hyperlink Eine Schaltfläche, die einen Hypertext-Link darstellt, oft so einfach wie normaler Text, der unterstrichen und vielleicht anders gefärbt ist.
radio-button Eine Schaltfläche, die anzeigt, ob sie mit einem kleinen Kreis neben der Tastenbeschriftung markiert ist oder nicht. Möglicherweise befindet sich eine Disc im Inneren des Kreises, wenn die Taste aktiviert ist. Ein unbestimmter (weder geprüfter noch ungeprüfter) Zustand kann mit einer anderen Grafik im Kreis angezeigt werden.
checkbox Das Element wird wie ein Kontrollkästchen gezeichnet, das nur den eigentlichen "checkbox"-Abschnitt enthält.
menu-item Eine Auswahl innerhalb eines Menüs, die auch als Bezeichnung für ein verschachteltes (hierarchisches) Menü dienen kann.
tab Eine Schaltfläche, die das Label für einen Bereich in einer tabellarischen Schnittstelle darstellt.
menubar Ein Menü von Menüs, typischerweise linear angeordnet, in einer horizontalen Leiste.
outline-tree Ein Menü, wo die Optionen mit kleinen Widgets ein- oder ausgeblendet werden können, die oft durch ein kleines Dreieck oder Plus- und Minuszeichen dargestellt werden.
range Ein Steuerelement, das die aktuelle Option anzeigt, vielleicht grafisch und es dem Benutzer ermöglicht, andere Optionen auszuwählen, vielleicht durch Ziehen eines Schiebers oder Drehen eines Drehknopfes.
signature Es ist ein Feld für die Eingabe der Unterschreibung
password Es ist ein Feld für die Eingabe des Kennworts. Normalerweise wird der Text als eine Reihe von Tabellen oder Boxen gemacht, um den Wert zu verdunkeln.
initial Es setzt die Eigenschaft auf den Standardwert.
inherit Es erbt die Eigenschaft von ihrem übergeordneten Element.

Browser-Support

chrome firefox safari opera
4.0+ -webkit- 2.0+ -moz 3.1+ -webkit- 15.0+ -webkit-

Übe dein Wissen

Welche Elemente können mit der CSS-Eigenschaft 'appearance' verändert werden?
Finden Sie das nützlich?