DieappearanceCSS Eigenschaft bestimmt das gerenderte Erscheinungsbild von ersetzten UI-Elementen wie Formularsteuerungen. Am häufigsten erhalten solche Elemente ein natives, plattformabhängiges Styling basierend auf dem Thema des Betriebssystems oder ein primitives Aussehen, das mithilfe von CSS überschrieben werden kann.

Probieren Sie es aus

appearance: auto;

appearance: none;

appearance: textfield;

<section>  <div>    <input type="search" value="search" aria-label="unlabeled search" />    <input type="checkbox" aria-label="unlabeled checkbox" />    <input type="radio" aria-label="unlabeled radio button" />    <button>Button</button>  </div></section>

input,button {  appearance: inherit;}

Syntax

/* CSS Basic User Interface Module Level 4 values */appearance: none;appearance: auto;appearance: menulist-button;appearance: textfield;appearance: base-select;/* Global values */appearance: inherit;appearance: initial;appearance: revert;appearance: revert-layer;appearance: unset;/* <compat-auto> values have the same effect as 'auto' */appearance: button;appearance: checkbox;

Werte

Dieappearance 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 er angewendet wird.

none

Verleiht dem Widget einprimitives Aussehen, das ermöglicht, es über CSS zu stylen, während die native Funktionalität des Widgets beibehalten wird. Dieser Wert beeinflusst keine Nicht-Widgets.

auto

Setzt interaktive Widgets darauf, mit ihremOS-nativen Aussehen zu rendern. Verhält sich wienone bei Elementen ohne OS-natürliche Stilgebung.

base-select

Nur relevant für das<select> Element und das::picker(select) Pseudo-Element, was es ermöglicht, sie zu stylen.

<compat-special>

Hat eine ähnliche Wirkung wieauto auf bestimmten Elementen.

textfield

Führt dazu, dass bestimmte<input> Typen dasErscheinungsbild destext Typs entsprechen.

menulist-button

Wenn es auf das<select> Element gesetzt ist, passt sich der Style des Dropdown-Pickersseinem Standardzustand an.

<compat-auto>

Enthalten für die Rückwärtskompatibilität; mögliche Werte umfassenbutton,checkbox,listbox,menulist,meter,progress-bar,push-button,radio,searchfield,slider-horizontal,square-button undtextarea. Alle Werte verhalten sich wieauto: verwenden Sie stattdessenauto.

Nicht-standardisierte Werte

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

slider-vertical

Macht den Schieberegler vertikal, wenn er auf<input type="range"> Elemente angewendet wird. Umeinen vertikalen Schieberegler zu erstellen sollten Sie stattdessen denwriting-mode aufvertical-lr und diedirection aufrtl setzen.

-apple-pay-button

Zeigt das Apple Pay Logo an, wenn es auf ein<button>,<a> oder<input> Element des Typsbutton oderreset gesetzt wird.

Beschreibung

Dieappearance Eigenschaft ermöglicht es, Elemente in ihrem OS-nativen Stil basierend auf dem Betriebssystemthema anzuzeigen sowie das Entfernen jeglicher plattformnahen Stilgebung mit dem Wertnone. Das Setzen vonappearance: none oder die sonstige Änderung des Erscheinungsbilds von UI-Widgets verä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) üblicherweise vom Browser unter Verwendung der nativen UI-Stile des Betriebssystems gerendert. Diesesnative Erscheinungsbild unterscheidet sich je nach Betriebssystem und Browser. Im diesem standardmäßigen Zustand haben Widgets nur begrenzte, wenn überhaupt, CSS-stylbare Funktionen. Welche Elemente dieses native UI-Erscheinungsbild haben, wird in HTML definiert.

Dieappearance Eigenschaft bietet eine gewisse Kontrolle über das Erscheinungsbild von HTML-Widgets, die standardmäßig wie native Betriebssystemsteuerungen aussehen. Am bemerkenswertesten ist, dass der Wertnone einen Teil des nativen Erscheinungsbilds eines Widgets unterdrückt. Dies führt zu einemprimitiven Aussehen, das per CSS gestylt werden kann, während die Funktionalität und Unterstützung für native Benutzerinteraktionen beibehalten werden.

Einige Widgets verschwinden vollständig, wenn sie aufappearance: none gesetzt sind. Die versteckten Steuerelemente bleiben jedoch interaktiv. Zum Beispiel wird durch Klicken auf ein mit einem<label> verbundenesappearance: none Kontrollkästchen dessen Status umgeschaltet.

Danone dazu führen kann, dass ein Widget versteckt wird, wird derbase Wert hinzugefügt, um Widgets mit einem grundlegenden Erscheinungsbild zu versehen. Wenn unterstützt, stellt derbase Wert sicher, dass Widgets ihr nativ aussehendes Erscheinungsbild beibehalten, während CSS zur Änderung von Widget-Stilen verwendet werden kann, die standardmäßig nicht veränderlich sind. Im Gegensatz zunone, das Radiobuttons und Kontrollkästchen verschwinden lassen kann, verleihtbase dem Widget ein primitives Erscheinungsbild mit standardmäßigen nativen Stilen, die verwendbar und interoperabel sind und ein hohes Maß an Anpassung über CSS ermöglichen. Während dieserbase Wert noch nicht unterstützt wird, bieten die vielen<compat-auto> Werte ähnliche Funktionen, sind jedoch typspezifisch und nicht global.

Derbase-select Wert, der nur für das<select> Element und das::picker(select) Pseudo-Element relevant ist, ermöglichtdas Styling von<select> Elementen und dem Auswahl-Picker (der die<option> Elemente enthält). Der Picker wird in der obersten Ebene gerendert, ähnlich wie ein Popover. Wennbase-select gesetzt ist, kann der Picker relativ zum Select (oder anderen Elementen) unter Verwendung vonCSS Anker-Positionierungsfunktionen positioniert werden. Darüber hinaus bewirkt derbase-select Wert, dass das<select> nicht außerhalb des Browserfensters gerendert wird oder eingebaute mobile Betriebssystemkomponenten auslöst. Außerdem wird es nicht mehr basierend auf der Breite der breitesten<option> dimensioniert.

Nicht-standardisierte vorangestellte Werte

Vor der Standardisierung ermöglichten die vorangestellten-moz-appearance und-webkit-appearance Eigenschaften das Anzeigen von Elementen als Widgets wie Schaltflächen oder Kontrollkästchen. Die folgenden nicht-standardisierten Werte können in Legacy-Stilvorlagen gefunden werden, am häufigsten als Werte von Schatten-DOM-Komponentenvorangestellten Pseudo-Elementen.

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

Formale Definition

Formale Syntax

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

Beispiele

Einfaches Beispiel

Dieses Beispiel zeigt die grundlegende Verwendung derappearance Eigenschaft, die das Erscheinungsbild eines<input> Elements in einigen Browsern verändert.

HTML

Wir fügen zweinumber Eingabesteuerungen zusammen mit ihren Labels hinzu.

<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"  /></label></p>

CSS

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

.text {  appearance: textfield;}

Ergebnisse

Abhängig vom Browser kann der Drehknopf visuell entfernt werden, wenn die Steuerung so eingestellt ist, dass sie wie ein Textfeld aussieht. Dieappearance Eigenschaft hat keinen Einfluss auf die Funktionalität: zum Beispiel, auch wenn es keinen Drehknopf mehr zum Klicken gibt, erhöhen und verringern die Aufwärts- und Abwärtspfeiltasten weiterhin den Wert.

Erscheinungsbild aufnone gesetzt

Das folgende Beispiel zeigt, wie das Standard-Styling von einem Kontrollkästchen, einem Radiobutton und einem<select> Element entfernt und benutzerdefiniertes Styling angewendet wird.

HTML

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

<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>    <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 des Typscheckbox an; diese Styles erzeugen ein rotes Quadrat, wenn das Element stylish ist. Wir setzenappearance: none auf den:checked UI-Status für alle Eingaben (checkbox undradio) sowie auf Elemente mit der.none Klasse. Dies entfernt alle Stile des Radiobuttons und Kontrollkästchens, außer den Rändern, und ermöglicht es, alle gesetzten Stile anzuwenden. Es gibt keine alternativen Stile für die Radiobuttons oder<select> Elemente, wennnone gesetzt ist.

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

Ergebnis

Das Setzen vonappearance: none ermöglicht es UI-Elementen, gestylt zu werden, birgt jedoch auch das Risiko, das Widget zu verstecken. Das nicht angekreuzte Kontrollkästchen, das standardmäßig aufauto steht, sieht aus wie ein Kontrollkästchen. Das Setzen vonappearance: none im:checked Status ermöglicht es, es zu stylen.

Wie das nicht angekreuzte Kontrollkästchen sieht der nicht angekreuzte Radiobutton wie ein natives UI-Widget aus, weil es das ist. Im angekreuzten Zustand, wennappearance: none angewendet wird, verschwindet der Radiobutton; seine Funktionalität wird beibehalten, und nur seine Ränder beeinflussen das Seitenrendering.

Festlegen des Erscheinungsbilds eines Selects

Wir können dieappearance Eigenschaft verwenden, um sich für eine benutzerdefinierte Select-Funktionalität zu entscheiden, die es ermöglicht, das<select> Element und seinen Picker zu stylen, der den Teil der Formularkomponente darstellt, der aus der Seite herausspringt.

HTML

Wir fügen drei<select> Elemente hinzu, mit den gleichen mehreren<option> Kindern. Wie bei jedem<select> fügen wir auch die zugehörigen<label> Elemente hinzu. Die dritte Option hat mehr Text, um den Effekt vonbase-select auf die Breite des<select> zu demonstrieren:

<label for="ice-cream1"  >Default flavor:  <select>    <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>    <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>    <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 mithilfe des::picker() Pseudo-Elements mit dem Parameterselect. Wir setzen denappearance Wert aller Picker und eines<select> Elements aufbase-select. Wir setzen das letzte<select> aufmenulist-button. Das erste<select> steht standardmäßig aufauto:

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

label {  display: block;}

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

select {  border: 1px solid red;  background-color: orange;}::picker(select) {  background-color: yellow;  border: none;}

Ergebnisse

Während diebackground-color undborder Stile auf alle<select> Elemente und ihre Picker definiert sind, beeinflussen die::picker(select) Stile nur den Picker, bei denen sowohl das Select als auch der Picker dieappearance Eigenschaft aufbase-select gesetzt haben. Die ersten und dritten Selects sehen gleich aus, weilmenulist-button ein Kompatibilitätsschlüsselwort ist.

Beachten Sie, dass standardmäßig die Inline-Größe des<select> normalerweise die Inline-Größe der<option> mit dem meisten Text ist und dass der Dropdown-Picker über der gerenderten Seite erscheint, wenn er geöffnet wird, was bedeutet, dass er nicht durch die umgebende Seite eingeschränkt wird und daher voll sichtbar ist. Diese Aussagen sind nicht mehr zutreffend, wennbase-select gesetzt ist.

Spezifikationen

Browser-Kompatibilität

Siehe auch

• prefers-color-scheme