CSS-Eigenschaft appearance

❮ Vorige Nächste ❯

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>

Versuch es selber!

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.