CSS appearance-Eigenschaft

Die Eigenschaft appearance in CSS wird verwendet, um das Aussehen von Formularelementen wie Schaltflächen, Kontrollkästchen, Optionsfeldern und anderen zu steuern. Sie ermöglicht es, den Stil der nativen Benutzeroberflächen-Steuerelemente zu ändern und so ein einheitliches Erscheinungsbild in verschiedenen Browsern und Geräten zu gewährleisten. In der modernen Webentwicklung ist appearance: none der primäre Anwendungsfall zum Anpassen von Formularelementen, während andere Werte weitgehend veraltet oder nicht standardisiert sind.

Die Eigenschaften -webkit-appearance und -moz-appearance sind proprietäre Vendor-Erweiterungen, die plattformnatives Styling basierend auf dem Thema des Betriebssystems anwenden. Sie sind nicht Teil der offiziellen W3C CSS-Spezifikation und werden hauptsächlich von WebKit-basierten (Safari, Chrome) bzw. Gecko-basierten (Firefox) Browsern unterstützt.

Wenn diese Eigenschaft auf Websites eingesetzt wird, sollte sie vorsichtig getestet werden. Die Implementierung der appearance-Eigenschaft kann insbesondere in älteren Browsern sehr unterschiedlich sein. In neueren Browsern gibt es jedoch nur geringe Unterschiede.

Warnung

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. Setzen Sie sie daher mit Bedacht ein.

Anfangswert	normal
Gilt für	Alle Elemente.
Vererbbar	Nein.
Animierbar	Ja.
Version	CSS3
DOM-Syntax	object.style.appearance = "none";

Wann `appearance` eingesetzt werden sollte

In der Praxis greift man auf appearance in einer Situation zurück: wenn ein Formularelement vollständig neu gestaltet werden soll und das integrierte Browser-Erscheinungsbild dabei im Weg steht. Das Setzen von appearance: none entfernt das native Rendering eines Elements wie eines Kontrollkästchens, Optionsfelds, <select>-Dropdowns oder Texteingabefelds und hinterlässt eine leere Leinwand, die mit eigenen Rahmen, Farben und Pseudo-Elementen gestaltet werden kann.

Der Kompromiss liegt in der Verantwortung. Native Steuerelemente bieten Fokusrahmen, Tastaturverhalten und Plattformkonventionen von Haus aus. Sobald das native Erscheinungsbild entfernt wird, müssen die visuellen Zustände (Fokus, ausgewählt, deaktiviert) selbst neu aufgebaut werden, sonst wird das Steuerelement unverständlich und nicht barrierefrei. Aus diesem Grund gilt:

Verwenden Sie appearance: none nur dann, wenn Sie wirklich ein benutzerdefiniertes Steuerelement benötigen und bereit sind, dessen Zustände und Barrierefreiheit zu handhaben.
Für eine schnelle Farbanpassung (die Haken- oder Füllfarbe eines Kontrollkästchens, Optionsfelds oder Bereichsreglers) bevorzugen Sie die Eigenschaft accent-color — sie bewahrt die native Barrierefreiheit und erfordert wesentlich weniger Code.

Syntax

Syntax der CSS appearance-Eigenschaft

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;

Hinweis

Nur none und auto werden in modernen Browsern weitgehend unterstützt. Die übrigen Werte sind weitgehend veraltet oder nicht standardisiert.

Beispiel: ein benutzerdefiniertes Kontrollkästchen

Das folgende Beispiel entfernt das native Kontrollkästchen-Rendering mit appearance: none und baut es als gestaltetes Kästchen neu auf, das bei Auswahl ein Häkchen zeigt.

<!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>

Probier es selbst »

So funktioniert es:

appearance: none (mit den Präfixen -webkit- und -moz- für ältere Browser) entfernt das Standard-Rendering des Kontrollkästchens, sodass es selbst gestaltet werden kann.
Das Kästchen erhält eine Breite und Höhe von 20px, einen 2px breiten Vollrahmen und einen border-radius von 3px für abgerundete Ecken. Das Setzen von outline auf none entfernt den Standard-Fokusrahmen (ersetzen Sie ihn im echten Code durch einen eigenen sichtbaren Fokusstil für die Barrierefreiheit).
Wenn das Kontrollkästchen aktiviert ist, fügt das ::before-Pseudo-Element des benachbarten <label> das Unicode-Häkchen (\2714) in ein dunkles Kästchen ein und nutzt dabei eine weiße Textfarbe, damit das Häkchen sich von der background-color abhebt.

Hinweis

Für einfache Farbanpassungen von Formularelementen empfiehlt modernes CSS die Verwendung der Eigenschaft accent-color anstelle von appearance: none. Sie erfordert weniger Code und behält die nativen Barrierefreiheitsfunktionen bei.

Ein sehr häufiger Einsatz von appearance: none ist das Entfernen des Standard-Pfeils und des nativen Rahmens eines <select>-Elements, um einen eigenen Pfeil mit einem Hintergrundbild einzufügen und Innenabstand sowie Rahmen zu steuern.

<!DOCTYPE html>
<html>
  <head>
    <title>Custom select</title>
    <style>
      select {
        appearance: none;
        -webkit-appearance: none;
        -moz-appearance: none;
        padding: 8px 32px 8px 12px;
        border: 1px solid #888;
        border-radius: 6px;
        background-color: #fff;
        /* a small SVG chevron as the dropdown arrow */
        background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12"><path d="M2 4l4 4 4-4" stroke="%23333" fill="none" stroke-width="2"/></svg>');
        background-repeat: no-repeat;
        background-position: right 12px center;
        cursor: pointer;
      }
    </style>
  </head>
  <body>
    <select>
      <option>Choose a fruit</option>
      <option>Apple</option>
      <option>Banana</option>
      <option>Cherry</option>
    </select>
  </body>
</html>

Ohne appearance: none behält der Browser seinen nativen Dropdown-Pfeil, der sich nicht zuverlässig ersetzen lässt. Nach dessen Entfernung liegen cursor und benutzerdefinierter Pfeil vollständig in der eigenen Hand.

Werte

Hinweis

Nur none und auto sind standardisiert und weitgehend unterstützt. Die übrigen Werte sind in modernen Browsern weitgehend veraltet oder nicht standardisiert.

Wert	Beschreibung
none	Entfernt alle plattformspezifischen Stile. Hinweis: `normal` ist der eigentliche Anfangswert, nicht `none`.
auto	Der User-Agent wählt das passende besondere Styling basierend auf dem Element aus. Wirkt wie none auf Elemente ohne besonderes Styling.
icon	Ein kleines Bild, das ein Objekt darstellt, oft mit einem Namen oder einer Beschriftung.
window	Ein Viewport, eine gerahmte Oberfläche zur Darstellung von Objekten und Inhalten für die Benutzerbetrachtung und -interaktion.
button	Ein kleines Objekt, das üblicherweise mit Text beschriftet ist und eine Benutzerentscheidung darstellt.
menu	Eine Reihe von Optionen, aus denen der Benutzer wählen kann, möglicherweise auch mehrere gleichzeitig. Es gibt verschiedene spezifische Menütypen.
field	Ein Bereich, in dem ein Benutzer einen Wert eingeben oder bearbeiten kann, typischerweise über eine Tastatur. Es gibt verschiedene 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 mit dem Namen des Dokuments. Kann auch zur Darstellung von Ordnern oder Verzeichnissen in einem Dateisystem verwendet werden.
tooltip	Ein Fenster, das vorübergehend Informationen oder Hilfe zu einem Objekt anzeigt. Auch als "info" in den CSS2-Systemfarben bezeichnet.
dialogue	Ein Fenster, das eine Benachrichtigung oder Alternativen zur Auswahl durch den Benutzer im Rahmen einer Benutzeraktion präsentiert. Auch als "message-box" in den CSS2-Systemschriften bezeichnet.
push-button	Eine Schaltfläche mit einem umgebenden Rahmen, oft abgeschrägt, um dreidimensional zu wirken, als wäre sie erhöht. Auch als "caption" in CSS2-Systemschriften bezeichnet.
hyperlink	Eine Schaltfläche, die einen Hypertext-Link darstellt, oft als einfacher Text, der unterstrichen und möglicherweise anders eingefärbt ist.
radio-button	Eine Schaltfläche, die ihren Aktivierungsstatus durch einen kleinen Kreis neben dem Beschriftungstext anzeigt. Bei aktivierter Schaltfläche kann sich eine Scheibe im Kreis 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 gezeichnet, einschließlich nur des eigentlichen "Kontrollkästchen"-Bereichs.
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 eines Bereichs in einer Tab-Oberfläche darstellt.
menubar	Ein Menü aus Menüs, typischerweise linear in einer horizontalen Leiste angeordnet.
outline-tree	Ein Menü, bei dem Optionen mit kleinen Widgets 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 die Auswahl anderer Optionen ermöglicht, etwa durch Ziehen eines Schiebereglers oder Drehen eines Knopfes.
signature	Ein Feld zur Eingabe einer Unterschrift.
password	Ein Feld zur Eingabe eines Passworts. Typischerweise wird der Text als eine Reihe von Punkten oder Kästchen dargestellt, um den Wert zu verbergen.
initial	Setzt die Eigenschaft auf ihren Standardwert.
inherit	Erbt die Eigenschaft vom übergeordneten Element.

Übungen

Übung

Was ist die Funktion der CSS-Eigenschaft appearance?

Sie wird verwendet, um das standardmäßige System-Styling von Formularelementen zu ändern.Sie wird verwendet, um die Hintergrundfarbe einer Seite zu ändern.Sie automatisiert den Formularvalidierungsprozess.Sie bietet eine Möglichkeit, natives Styling basierend auf der Plattform des Benutzers anzuwenden.Sie wird verwendet, um Animationen in CSS zu erstellen.

Wann appearance eingesetzt werden sollte

Syntax

Beispiel: ein benutzerdefiniertes Kontrollkästchen

Beispiel: ein benutzerdefiniertes Select-Dropdown

Werte

Verwandte Eigenschaften

Übungen

Wann `appearance` eingesetzt werden sollte