appearance

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

none

Verleiht dem Widget ein primitives Erscheinungsbild, das über CSS gestylt werden kann, wobei die native Funktionalität des Widgets erhalten bleibt. Dieser Wert hat keine Auswirkungen auf Nicht-Widgets.

auto

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

base-select

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

<compat-special>

Hat eine ähnliche Wirkung wie auto bei bestimmten Elementen.

textfield

Lässt das Erscheinungsbild bestimmter <input>-Typen dem des text-Typs entsprechen.

menulist-button

Bei Einstellung auf das <select>-Element entspricht der Stil des Dropdown-Auswahlelements dem seines Standardzustands.

<compat-auto>

Wird aus Gründen der Abwärtskompatibilität eingeschlossen; mögliche Werte umfassen button, checkbox, listbox, menulist, meter, progress-bar, push-button, radio, searchfield, slider-horizontal, square-button und textarea. Die Werte verhalten sich alle wie auto; verwenden Sie stattdessen auto.

Nicht-standardisierte Werte

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

slider-vertical

Lässt den Slider vertikal erscheinen, wenn er auf <input type="range">-Elemente angewendet wird. Um einen vertikalen Slider 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 die Anzeige von Elementen im OS-nativen Stil basierend auf dem Thema des Betriebssystems sowie das Entfernen jeglicher plattformnativen Stile durch den Wert none. Das Setzen von appearance: none oder das anderweitige Ändern des Erscheinungsbilds von UI-Widgets ändert nicht die Funktionalität des Elements.

Während die meisten Elemente in einem Dokument vollständig durch CSS gestylt werden können, werden UI-Steuerelemente (Widgets) typischerweise vom Browser mit den nativen UI-Stilen des Betriebssystems gerendert. Dieses native Erscheinungsbild unterscheidet sich zwischen Betriebssystemen und Browsern. In diesem Standardzustand haben Widgets eingeschränkte oder gar keine stilbaren Features mit CSS. Welche Elemente dieses native UI-Erscheinungsbild haben, wird in HTML definiert.

Die appearance-Eigenschaft bietet einige Kontrolle über das Erscheinungsbild von HTML-Widgets, die standardmäßig wie native Betriebssystem-Steuerelemente aussehen. Besonders bemerkenswert ist, dass der Wert none einen Teil des nativen Erscheinungsbildes eines Widgets unterdrückt. Dies führt zu einem primitiven Look, der über CSS gestylt werden kann und dennoch Funktionalität und Unterstützung für native Benutzerinteraktionen beibehält.

Einige Widgets verschwinden vollständig, wenn sie auf appearance: none gesetzt werden. Die versteckten Steuerelemente bleiben jedoch interaktiv. Beispielsweise wird durch Klicken auf ein <label>, das mit einer Checkbox mit appearance: none verknüpft ist, der Checked-Status der Checkbox umgeschaltet.

Da none dazu führen kann, dass ein Widget ausgeblendet wird, wird der base-Wert hinzugefügt, um Widgets ein Basiserscheinungsbild zu verleihen. Wenn unterstützt, stellt der base-Wert sicher, dass Widgets ihr natives Erscheinungsbild beibehalten, während CSS verwendet werden kann, um die Standards nicht änderbaren Stile eines Widgets zu ändern. Im Gegensatz zu none, das Radiobuttons und Checkboxen verschwinden lassen kann, gibt base dem Widget ein primitives Erscheinungsbild mit standardmäßigen nativen Stilen, die verwendbar und interoperabel sind, sowie eine gute Anpassungsmöglichkeit über CSS. Während dieser base-Wert noch nicht unterstützt wird, bieten die vielen <compat-auto>-Werte ähnliche Funktionalität, 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-Werkzeugs (das die <option>-Elemente enthält). Der Picker wird in der obersten Schicht gerendert, ähnlich wie ein Popover. Wenn base-select gesetzt ist, kann der Picker relativ zum Selektor (oder anderen Elementen) mit den CSS-Ankerpositionierungs -Funktionen positioniert werden. Darüber hinaus führt der Wert base-select dazu, dass das <select> nicht außerhalb des Browserfensters gerendert wird oder keine eingebauten Komponenten des mobilen Betriebssystems auslöst. Es wird auch nicht mehr basierend auf der Breite der breitesten <option>-Wert bemessen.

Vor der Standardisierung ermöglichten die präfixierten -moz-appearance und -webkit-appearance Eigenschaften es Elementen, als Widgets wie Buttons oder Checkboxen angezeigt zu werden. Die folgenden nicht-standardisierten Werte können in Legacy-Stylesheets vorkommen, am häufigsten als Werte von Shadow-DOM-Komponenten präfixierte Pseudo-Elemente.

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  

Dieses Beispiel demonstriert die grundlegende Verwendung der appearance-Eigenschaft und verändert das Erscheinungsbild eines <input>-Elements in einigen Browsern.

HTML

Wir fügen zwei number-Formularsteuerelemente 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 so, dass es wie ein Textfeld aussieht.

.text {
  appearance: textfield;
}

Ergebnisse

Abhängig vom Browser kann der Spinner visuell entfernt werden, wenn das Steuerungselement so eingestellt ist, dass es wie ein Textfeld aussieht. Die appearance-Eigenschaft hat keine Wirkung auf die Funktionalität: Zum Beispiel, während es keinen Spinner mehr geben mag, auf den man klicken kann, werden die Pfeiltasten nach oben und unten immer noch den Wert inkrementieren und dekrementieren.

Das folgende Beispiel zeigt, wie man das Standardstyling von einem Kontrollkästchen, einem Radiobutton und einem <select>-Element entfernt und benutzerdefiniertes Styling anwendet.

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 sowohl auf <input>-Elemente vom Typ checkbox an; diese Styles erzeugen ein rotes Quadrat, wenn das Element stilisierbar ist. Wir setzen appearance: none auf den :checked-UI-Zustand für alle Eingaben (checkbox und radio), sowie auf Elemente mit der .none-Klasse. Dies entfernt alle Styles des Radiobuttons und des Kontrollkästchens, abgesehen von den Rändern, und erlaubt es, alle gesetzten Styles anzuwenden. Es gibt keine alternativen Styles 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, aber es birgt auch das Risiko, das Widget zu verstecken. Das nicht angekreuzte Kontrollkästchen, dessen appearance standardmäßig auto ist, sieht aus wie ein Kontrollkästchen. Das Setzen von appearance: none im :checked-Zustand ermöglicht es, es zu stylen.

Wie das nicht angekreuzte Kontrollkästchen sieht auch der nicht angekreuzte Radiobutton wie das native UI-Widget aus, weil er es ist. Im angekreuzten Zustand, mit appearance: none angewendet, verschwindet der Radiobutton; seine Funktionalität bleibt erhalten und nur seine Ränder beeinflussen das Seitenrendering.

Wir können die appearance-Eigenschaft verwenden, um benutzerdefinierte Selektor-Funktionalitäten zu aktivieren, was das Styling des <select>-Elements und seines Pickers ermöglicht, welcher den Teil des Formularsteuerelements darstellt, der aus der Seite herausspringt.

HTML

Wir fügen drei <select>-Elemente ein, die mit denselben mehreren <option>-Kindern ausgestattet sind. Wie bei jedem <select> beinhalten wir auch zugehörige <label>-Elemente. 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 standardmäßig auf den auto-Zustand gesetzt:

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

label {
  display: block;
}

Wir setzen Werte für die background-color und border-Eigenschaften der <select>-Elemente und ihrer Picker, um die Effekte 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, wirken die ::picker(select)-Styles nur auf den Picker, wenn sowohl das select als auch der Picker die appearance-Eigenschaft auf base-select gesetzt haben. Die ersten und dritten select sehen gleich aus, weil menulist-button ein Kompatibilitätsschlüsselwort ist.

Achten Sie darauf, dass in der Regel die Inline-Größe des <select> der Inline-Größe der <option> mit dem meisten Text entspricht und dass das Dropdown-Auswahlelement über der gerenderten Seite erscheint, wenn es geöffnet ist, wodurch es nicht durch die umgebende Seite eingeschränkt wird und daher vollständig sichtbar ist. Diese Aussagen stimmen nicht mehr, wenn base-select gesetzt ist.

• prefers-color-scheme