appearance

Die appearance-Eigenschaft kann auf alle Elemente und Pseudo-Elemente angewendet werden, aber die Wirkung des angegebenen Wertes hängt, falls vorhanden, vom angewendeten Element ab.

none

Verleiht dem Widget ein primitives Erscheinungsbild, sodass es über CSS gestylt werden kann, während die native Funktionalität des Widgets erhalten bleibt. Dieser Wert wirkt sich nicht auf Nicht-Widgets aus.

auto

Setzt interaktive Widgets, damit sie mit ihrem OS-nativen Erscheinungsbild gerendert werden. Verhält sich wie none bei Elementen ohne OS-native Styling.

base-select

Nur relevant für das <select>-Element und das ::picker(select)-Pseudo-Element, um deren Styling zu ermöglichen.

<compat-special>

Hat einen ähnlichen Effekt wie auto auf bestimmten Elementen.

textfield

Bewirkt, dass das Erscheinungsbild bestimmter Typen von <input> dem des Typs text entspricht.

menulist-button

Wenn auf das <select>-Element angewendet, entspricht der Stil des Drop-down-Pickers dem seines Standardzustands.

<compat-auto>

Enthalten für die Rückwärtskompatibilität; mögliche Werte schließen button, checkbox, listbox, menulist, meter, progress-bar, push-button, radio, searchfield, slider-horizontal, square-button und textarea ein. Alle Werte verhalten sich wie auto: verwenden Sie stattdessen auto.

Nicht-standardisierte Werte

Einige nicht-standardisierte Werte werden auch in einigen Browsern unterstützt:

slider-vertical

Macht den Schieberegler vertikal, wenn auf <input type="range">-Elemente angewendet. Um einen vertikalen Schieberegler zu erstellen, sollten Sie stattdessen den writing-mode auf vertical-lr und die direction auf rtl setzen.

-apple-pay-button

Zeigt das Apple Pay-Logo an, wenn es auf ein <button>, <a> oder <input>-Element vom Typ button oder reset gesetzt wird.

Die appearance-Eigenschaft ermöglicht das Anzeigen von Elementen in ihrem Betriebssystem-nativen Stil basierend auf dem Thema des Betriebssystems sowie das Entfernen jeglichen plattformspezifischen Stylings mit dem Wert none. Das Setzen von appearance: none oder das Ändern des Erscheinungsbilds von UI-Widgets ändert nicht die Funktionalität des Elements.

Während die meisten Elemente in einem Dokument vollständig mit CSS gestylt werden können, werden UI-Steuerelemente (Widgets) typischerweise vom Browser unter Verwendung der nativen UI-Stile des Betriebssystems gerendert. Diese natives Erscheinungsbild unterscheidet sich zwischen Betriebssystemen und Browsern. In diesem Standardzustand haben Widgets nur begrenzte, wenn überhaupt, Styling-Möglichkeiten mit CSS. Welche Elemente dieses native UI-Erscheinungsbild haben, ist in HTML definiert.

Die appearance-Eigenschaft bietet einige Kontrolle über das Erscheinungsbild von HTML-Widgets, die standardmäßig wie native Betriebssystem-Steuerelemente aussehen. Besonders hervorzuheben ist der Wert none, der einen Teil des nativen Erscheinungsbilds eines Widgets unterdrückt. Dies führt zu einem primitiven Look, der über CSS gestylt werden kann, während die Funktionalität und native Benutzerinteraktionen unterstützt bleiben.

Einige Widgets verschwinden vollständig, wenn appearance: none gesetzt wird. Die ausgeblendeten Steuerelemente bleiben jedoch interaktiv. Beispielsweise wird durch Klicken auf ein <label>, das mit einem appearance: none-Checkbox-Element verknüpft ist, der geprüfte Zustand der Checkbox umgeschaltet.

Da none dazu führen kann, dass ein Widget ausgeblendet wird, wird der base-Wert hinzugefügt, um Widgets ein Basiserleben zu bieten. Wenn unterstützt, stellt der base-Wert sicher, dass Widgets ihr natives Erscheinungsbild beibehalten, während CSS verwendet werden kann, um ein Widget zu ändern, dessen Stile standardmäßig nicht änderbar sind. Im Gegensatz zu none, das Radiobuttons und Checkboxen verschwinden lassen kann, gibt base dem Widget ein primitives Erscheinungsbild mit standardmäßigen nativen Stilen, die nutzbar und interoperabel sind, und ermöglicht auch ein gutes Maß an Anpassung über CSS. Während dieser base-Wert noch nicht unterstützt wird, bieten die vielen <compat-auto>-Werte ähnliche Funktionen, sind jedoch typspezifisch und nicht global.

Der Wert base-select, der nur für das <select>-Element und das ::picker(select)-Pseudo-Element relevant ist, ermöglicht das Styling von <select>-Elementen und des Auswahl-Pickers, der die <option>-Elemente enthält. Der Picker wird in der obersten Ebene gerendert, ähnlich einem Popover. Wenn base-select gesetzt ist, kann der Picker relativ zur Auswahl (oder anderen Elementen) mit Hilfe von CSS-Anker-Positionierungsfunktionen positioniert werden. Zusätzlich bewirkt der base-select-Wert, dass das <select> nicht außerhalb des Browserfensters rendert oder integrierte Komponenten des mobilen Betriebssystems auslöst. Es wird auch nicht mehr basierend auf der Breite der breitesten <option> dimensioniert.

Vor der Standardisierung erlaubten die mit Präfixen versehenen Eigenschaften -moz-appearance und -webkit-appearance, dass Elemente als Widgets wie Schaltflächen oder Checkboxen angezeigt werden. Die folgenden nicht-standardisierten Werte können in veralteten Stylesheets gefunden werden, am häufigsten als Werte von Shadow-DOM-Komponenten mit Präfix versehenen Pseudo-Elementen.

Autoren werden ermutigt, nur standardisierte Schlüsselwörter zu verwenden.

appearance = 
  none              |
  auto              |
  base              |
  base-select       |
  <compat-auto>     |
  <compat-special>  |
  base              

<compat-auto> = 
  searchfield   |
  textarea      |
  checkbox      |
  radio         |
  menulist      |
  listbox       |
  meter         |
  progress-bar  |
  button        

<compat-special> = 
  textfield        |
  menulist-button  

In diesem Beispiel wird die grundlegende Verwendung der appearance-Eigenschaft gezeigt, um das Erscheinungsbild eines <input>-Elements in einigen Browsern zu ändern.

HTML

Wir fügen zwei number-Formularelemente zusammen mit ihren Labels ein.

<p>
  <label>Enter a number: <input type="number" min="0" max="10" /></label>
</p>
<p>
  <label
    >Enter a number: <input type="number" min="0" max="10" class="text"
  /></label>
</p>

CSS

Wir setzen das Element mit der Klasse text, damit es wie ein Textfeld aussieht.

.text {
  appearance: textfield;
}

Ergebnisse

Abhängig vom Browser wird der Spinner möglicherweise visuell entfernt, wenn das Steuerelement so gesetzt wird, dass es wie ein Textfeld aussieht. Die appearance-Eigenschaft hat keinen Einfluss auf die Funktionalität: zum Beispiel werden, obwohl möglicherweise kein Spinner mehr zum Klicken vorhanden ist, die Auf- und Ab-Cursor-Tasten weiterhin den Wert erhöhen und verringern.

Das folgende Beispiel zeigt, wie die Standard-Styling von einem Kontrollkästchen, einem Radio-Button und einem <select>-Element entfernt und individuelles Styling angewendet wird.

HTML

Wir fügen Paare von Kontrollkästchen, Radiobuttons und <select>-Elementen zusammen mit ihren zugehörigen Labels ein:

<label><input type="checkbox" /> Default unchecked </label>
<label><input type="checkbox" checked /> Default checked </label>

<hr />

<label><input type="radio" name="radio" /> Default unchecked </label>
<label><input type="radio" name="radio" checked /> Default checked </label>

<hr />

<label
  >Unstyled select
  <select>
    <option>Option 1</option>
    <option>Option 2</option>
  </select>
</label>

<label
  >Styled select
  <select class="none">
    <option>Option 1</option>
    <option>Option 2</option>
  </select>
</label>

CSS

label {
  display: block;
  margin: 0.5em 0;
}

Wir wenden Styles auf beide <input>-Elemente vom Typ checkbox an; diese Styles erzeugen ein rotes Quadrat, wenn das Element stylbar ist. Wir setzen appearance: none auf den :checked UI-Zustand für alle Eingaben (checkbox und radio) sowie auf Elemente mit der .none-Klasse. Dadurch werden alle Styles des Radiobuttons und des Kontrollkästchens entfernt, außer den Rändern, und jegliche festgelegten Styles können angewendet werden. Es gibt keine Alternativstyles für die Radiobuttons oder <select>-Elemente, wenn none gesetzt ist.

[type="checkbox"] {
  width: 1em;
  height: 1em;
  display: inline-block;
  background: red;
}
input:checked,
.none {
  appearance: none;
}

Ergebnis

Das Setzen von appearance: none ermöglicht es, UI-Elemente zu stylen, birgt jedoch auch das Risiko, das Widget auszublenden. Das nicht markierte Kontrollkästchen, mit seinem appearance auf den Standardwert auto, sieht aus wie ein Kontrollkästchen. Das Setzen von appearance: none im :checked-Zustand ermöglicht es, es zu stylen.

Wie das nicht markierte Kontrollkästchen sieht der nicht markierte Radiobutton wie das native UI-Widget aus, weil es das ist. Im markierten Zustand, mit angewendetem appearance: none, verschwindet der Radiobutton; seine Funktionalität bleibt erhalten, und nur seine Ränder beeinflussen das Rendering der Seite.

Wir können die appearance-Eigenschaft verwenden, um benutzerdefinierte Select-Funktionalität zu aktivieren und das <select>-Element und seinen Picker, der den Teil des Formularelements repräsentiert, der aus der Seite herausspringt, zu stylen.

HTML

Wir fügen drei <select>-Elemente mit denselben mehrfachen <option>-Kindern ein. Wie bei jedem <select> fügen wir auch zugehörige <label>-Elemente hinzu. Die dritte Option hat mehr Text, um die Wirkung von base-select auf die Breite des <select> zu demonstrieren:

<label for="ice-cream1"
  >Default flavor:
  <select id="ice-cream1">
    <option>Asparagus</option>
    <option>Dulce de leche</option>
    <option>Pistachio, rum raisin, and coffee</option>
  </select>
</label>
<label for="ice-cream2"
  >Base select flavor:
  <select id="ice-cream2" class="baseSelect">
    <option>Asparagus</option>
    <option>Dulce de leche</option>
    <option>Pistachio, rum raisin, and coffee</option>
  </select>
</label>
<label for="ice-cream3"
  >Menulist button flavor:
  <select id="ice-cream3" class="menulistButton">
    <option>Asparagus</option>
    <option>Dulce de leche</option>
    <option>Pistachio, rum raisin, and coffee</option>
  </select>
</label>

CSS

Wir wählen die Picker aller <select>-Elemente mit dem ::picker()-Pseudo-Element und dem select-Parameter aus. Wir setzen den appearance-Wert aller Picker und eines <select>-Elements auf base-select. Wir setzen das letzte <select> auf menulist-button. Das erste <select> wird auf den auto-Zustand zurücksetzen:

.baseSelect,
::picker(select) {
  appearance: base-select;
}
.menulistButton {
  appearance: menulist-button;
}

label {
  display: block;
}

Wir setzen Werte für die Eigenschaften background-color und border der <select> und Picker, um die Auswirkungen der appearance-Werte zu demonstrieren:

select {
  border: 1px solid red;
  background-color: orange;
}

::picker(select) {
  background-color: yellow;
  border: none;
}

Ergebnisse

Obwohl die background-color und border-Styles auf allen <select>-Elementen und ihren Pickern definiert sind, beeinflussen die ::picker(select)-Styles nur den Picker, bei dem sowohl das select als auch der Picker die appearance-Eigenschaft auf base-select gesetzt haben. Die ersten und dritten Auswahlen sehen gleich aus, weil menulist-button ein Kompatibilitätsschlüsselwort ist.

Beachten Sie, dass die Inline-Größe des <select> standardmäßig die Inline-Größe des <option> mit dem meisten Text ist und dass der Dropdown-Picker über der gerenderten Seite angezeigt wird, wenn er geöffnet ist, wodurch er nicht durch die umgebende Seite eingeschränkt wird und somit vollständig sichtbar ist. Diese Aussagen sind nicht mehr wahr, wenn base-select gesetzt ist.

• prefers-color-scheme