CSS-Eigenschaft appearance

Die CSS-Eigenschaft appearance wird verwendet, um das Erscheinungsbild von Formularelementen wie Schaltflächen, Kontrollkästchen, Optionsfeldern und anderen zu steuern. Sie ermöglicht es Ihnen, das Styling der nativen Benutzeroberflächen-Steuerelemente zu ändern und so ein einheitliches Aussehen über verschiedene Browser und Geräte hinweg zu erzielen. In der modernen Webentwicklung ist appearance: none der wichtigste Anwendungsfall für die Anpassung von Formularelementen, während andere Werte größtenteils veraltet oder nicht standardisiert sind.

Die Eigenschaften -webkit-appearance und -moz-appearance sind proprietäre Herstellererweiterungen, die verwendet werden, um plattformspezifisches natives Styling auf Grundlage des Designs des Betriebssystems anzuwenden. Sie sind kein Teil der offiziellen W3C-CSS-Spezifikation und werden hauptsächlich von WebKit-basierten Browsern (Safari, Chrome) bzw. Gecko-basierten Browsern (Firefox) unterstützt.

Wenn diese Eigenschaft auf Websites verwendet wird, sollte sie vorsichtig getestet werden. Die Implementierung der Eigenschaft appearance kann sich insbesondere in älteren Browsern deutlich unterscheiden. In neueren Browsern gibt es jedoch nur geringe Unterschiede.

WARNING

Beachten Sie, dass die Eigenschaft "appearance" nicht von allen Browsern unterstützt wird und ihr Verhalten je nach Browser und Betriebssystem variieren kann. Außerdem kann das Ändern des Erscheinungsbilds von Formularelementen die Benutzerfreundlichkeit und Barrierefreiheit Ihrer Website beeinträchtigen, daher sollte sie mit Bedacht eingesetzt werden.

Initial Value	normal
Applies to	All elements.
Inherited	No.
Animatable	Yes.
Version	CSS3
DOM Syntax	object.style.appearance = "none";

Syntax

Syntax der CSS-Eigenschaft appearance

css

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;

note
Nur none und auto werden in modernen Browsern breit unterstützt. Die übrigen Werte sind größtenteils veraltet oder nicht standardisiert.

Beispiel für die Eigenschaft appearance:

Beispiel der CSS-Eigenschaft appearance mit dem Wert button

html

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .custom-checkbox input[type="checkbox"] {
        -webkit-appearance: none; /* remove default appearance on Webkit-based browsers */
        -moz-appearance: none; /* remove default appearance on Mozilla-based browsers */
        appearance: none; /* remove default appearance on all other browsers */
        width: 20px;
        height: 20px;
        border: 2px solid #333;
        border-radius: 3px;
        outline: none;
        cursor: pointer;
        margin-right: 10px;
      }

      .custom-checkbox input[type="checkbox"]:checked + label::before {
        content: "\2714"; /* Unicode checkmark symbol */
        display: inline-block;
        width: 20px;
        height: 20px;
        text-align: center;
        line-height: 20px;
        color: #fff;
        background-color: #333;
        border-radius: 2px;
        margin-right: 8px;
      }
    </style>
  </head>
  <body>
    <span class="custom-checkbox">
      <input type="checkbox" id="myCheckbox" name="myCheckbox" />
      <label for="myCheckbox">Checkbox</label>
    </span>
  </body>
</html>

Try it Yourself »

In diesem Beispiel entfernen wir zunächst das Standard-Erscheinungsbild des Kontrollkästchens, indem wir die Eigenschaft appearance auf none setzen. Anschließend definieren wir das benutzerdefinierte Erscheinungsbild des Kontrollkästchens mithilfe von CSS-Regeln.

Das Kontrollkästchen hat eine Breite und Höhe von 20 Pixeln, einen 2 Pixel breiten durchgehenden Rahmen und einen border-radius von 3 Pixeln, um abgerundete Ecken zu erzeugen. Außerdem setzen wir die Eigenschaft outline auf none, um die Umrandung zu entfernen, die um das Kontrollkästchen erscheint, wenn es den Fokus hat.

Um ein Häkchen anzuzeigen, wenn das Kontrollkästchen aktiviert ist, verwenden wir das Pseudo-Element ::before auf dem benachbarten <label>, um ein Inhaltsfeld mit dem Unicode-Häkchensymbol (\2714) als Inhalt zu erstellen. Wir geben diesem Feld eine Breite und Höhe von 20 Pixeln, eine Hintergrundfarbe von #333 und einen border-radius von 2 Pixeln, damit es wie ein abgerundetes Quadrat aussieht. Außerdem setzen wir die Textfarbe auf Weiß, damit sich das Häkchen deutlich vom dunklen Hintergrund abhebt.

note
Für eine einfache Farbanpassung von Formularelementen empfiehlt modernes CSS die Verwendung der Eigenschaft accent-color anstelle von appearance: none. Sie benötigt weniger Code und erhält die nativen Barrierefreiheitsfunktionen.

Values

note
Nur none und auto sind standardisiert und weit verbreitet unterstützt. Die übrigen Werte sind in modernen Browsern größtenteils veraltet oder nicht standardisiert.

Value	Description
none	Entfernt alle plattformspezifischen Stile. Hinweis: `normal` ist der tatsächliche Anfangswert, nicht `none`.
auto	Der User-Agent wählt das passende spezielle Styling basierend auf dem Element aus. Wirkt wie none bei Elementen ohne spezielles Styling.
icon	Ein kleines Bild, das ein Objekt darstellt, oft mit einem Namen oder einer Beschriftung.
window	Ein Viewport, eine gerahmte Fläche, die verwendet wird, um Objekte und Inhalte für die Ansicht und Interaktion des Benutzers darzustellen.
button	Ein kleines Objekt, das normalerweise mit Text beschriftet ist und eine Benutzerentscheidung darstellt.
menu	Eine Reihe von Optionen, aus denen der Benutzer wählen kann, möglicherweise mehr als eine gleichzeitig. Es gibt mehrere spezielle Arten von Menüs.
field	Ein Bereich, in dem ein Benutzer einen Wert eingeben oder bearbeiten kann, typischerweise mithilfe einer Tastatur. Es gibt mehrere spezielle Felder.
desktop	Ein Fenster, das ein System als Ganzes darstellt und oft andere Fenster enthält.
workspace	Ein Fenster, das ein Projekt oder eine Anwendung darstellt und andere Fenster enthalten kann, typischerweise mit einer Titelleiste, die den Namen des Projekts oder der Anwendung anzeigt.
document	Ein Fenster, das ein Benutzerdokument darstellt, typischerweise mit einer Titelleiste, die seinen Namen anzeigt. Kann auch verwendet werden, um Ordner oder Verzeichnisse in einem Dateisystem darzustellen.
tooltip	Ein Fenster, das verwendet wird, um vorübergehend Informationen oder Hilfe zu einem Objekt anzuzeigen. Wird im CSS2-Systemfarbmodell auch "info" genannt.
dialogue	Ein Fenster, das verwendet wird, um eine Benachrichtigung oder Auswahlmöglichkeiten für den Benutzer als Teil einer vom Benutzer ausgeführten Aktion darzustellen. Wird in den CSS2-Systemschriftarten auch "message-box" genannt.
push-button	Eine Schaltfläche mit einem sie umgebenden Rahmen, oft abgeschrägt, um dreidimensional zu wirken, als wäre sie erhaben. Wird in den CSS2-Systemschriftarten auch "caption" genannt.
hyperlink	Eine Schaltfläche, die einen Hypertext-Link darstellt, oft so einfach wie normaler, unterstrichener und möglicherweise andersfarbiger Text.
radio-button	Eine Schaltfläche, die anzeigt, ob sie aktiviert ist oder nicht, mit einem kleinen Kreis neben der Beschriftung der Schaltfläche. Wenn die Schaltfläche aktiviert ist, kann sich im Kreis ein Punkt befinden. Ein unbestimmter Zustand (weder aktiviert noch deaktiviert) kann durch eine andere Grafik im Kreis angezeigt werden.
checkbox	Das Element wird wie ein Kontrollkästchen dargestellt, einschließlich nur des eigentlichen "Checkbox"-Teils.
menu-item	Eine Auswahl innerhalb eines Menüs, die auch als Beschriftung für ein verschachteltes (hierarchisches) Menü dienen kann.
tab	Eine Schaltfläche, die die Beschriftung für einen Bereich in einer Registerkartenoberfläche darstellt.
menubar	Ein Menü aus Menüs, typischerweise linear angeordnet in einer horizontalen Leiste.
outline-tree	Ein Menü, bei dem die Optionen mit kleinen Steuerelementen ein- oder ausgeblendet werden können, oft dargestellt durch ein kleines Dreieck oder Plus- und Minuszeichen.
range	Ein Steuerelement, das die aktuelle Option anzeigt, möglicherweise grafisch, und dem Benutzer erlaubt, andere Optionen auszuwählen, möglicherweise durch Ziehen eines Schiebereglers oder Drehen eines Knopfs.
signature	Ein Feld zur Eingabe einer Unterschrift.
password	Ein Feld zur Eingabe eines Passworts. Typischerweise wird der Text als Reihe von Punkten oder Kästchen dargestellt, um den Wert zu verbergen.
initial	Setzt die Eigenschaft auf ihren Standardwert.
inherit	Erbt die Eigenschaft vom Elternelement.

Practice

What is the function of the CSS appearance property?

It is used to change the default system styling of form controls.It is used to change the background color of a page.It automates the form validation process.It provides a way to apply native styling based on the user's platform.It is used to create animations in CSS.

CSS-Eigenschaft appearance ​

Syntax ​

Beispiel für die Eigenschaft appearance: ​

Values ​

Practice ​

CSS-Eigenschaft appearance

Syntax

Beispiel für die Eigenschaft appearance:

Values

Practice