appearance

Probieren Sie es aus

appearance: auto;

appearance: none;

appearance: textfield;

<section id="default-example">
  <div class="background" id="example-element">
    <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

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

none

Verleiht dem Widget ein primitives 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 ihrem OS-nativen Aussehen zu rendern. Verhält sich wie none 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 wie auto auf bestimmten Elementen.

textfield

Führt dazu, dass bestimmte <input> Typen das Erscheinungsbild des text Typs entsprechen.

menulist-button

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

<compat-auto>

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

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. 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 des Typs button oder reset gesetzt wird.

Beschreibung

Die appearance Eigenschaft ermöglicht es, Elemente in ihrem OS-nativen Stil basierend auf dem Betriebssystemthema anzuzeigen sowie das Entfernen jeglicher plattformnahen Stilgebung mit dem Wert none. Das Setzen von appearance: 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. Dieses native 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.

Die appearance Eigenschaft bietet eine gewisse Kontrolle über das Erscheinungsbild von HTML-Widgets, die standardmäßig wie native Betriebssystemsteuerungen aussehen. Am bemerkenswertesten ist, dass der Wert none einen Teil des nativen Erscheinungsbilds eines Widgets unterdrückt. Dies führt zu einem primitiven 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 auf appearance: none gesetzt sind. Die versteckten Steuerelemente bleiben jedoch interaktiv. Zum Beispiel wird durch Klicken auf ein mit einem <label> verbundenes appearance: none Kontrollkästchen dessen Status umgeschaltet.

Da none dazu führen kann, dass ein Widget versteckt wird, wird der base Wert hinzugefügt, um Widgets mit einem grundlegenden Erscheinungsbild zu versehen. Wenn unterstützt, stellt der base 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 zu none, das Radiobuttons und Kontrollkästchen verschwinden lassen kann, verleiht base 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 dieser base Wert noch nicht unterstützt wird, bieten die vielen <compat-auto> Werte ähnliche Funktionen, sind jedoch typspezifisch und nicht global.

Der base-select Wert, der nur für das <select> Element und das ::picker(select) Pseudo-Element relevant ist, ermöglicht das 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. Wenn base-select gesetzt ist, kann der Picker relativ zum Select (oder anderen Elementen) unter Verwendung von CSS Anker-Positionierungsfunktionen positioniert werden. Darüber hinaus bewirkt der base-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-Komponenten vorangestellten 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 der appearance Eigenschaft, die das Erscheinungsbild eines <input> Elements in einigen Browsern verändert.

HTML

Wir fügen zwei number 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" 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 kann der Drehknopf visuell entfernt werden, wenn die Steuerung so eingestellt ist, dass sie wie ein Textfeld aussieht. Die appearance 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 auf none 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 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 des Typs checkbox an; diese Styles erzeugen ein rotes Quadrat, wenn das Element stylish ist. Wir setzen appearance: none auf den :checked UI-Status für alle Eingaben (checkbox und radio) 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, 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-Elementen, gestylt zu werden, birgt jedoch auch das Risiko, das Widget zu verstecken. Das nicht angekreuzte Kontrollkästchen, das standardmäßig auf auto steht, sieht aus wie ein Kontrollkästchen. Das Setzen von appearance: 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, wenn appearance: 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 die appearance 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 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 mithilfe des ::picker() Pseudo-Elements mit dem Parameter select. 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> steht standardmäßig auf auto:

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

label {
  display: block;
}

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

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

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

Ergebnisse

Während die background-color und border 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 die appearance Eigenschaft auf base-select gesetzt haben. Die ersten und dritten Selects sehen gleich aus, weil menulist-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, wenn base-select gesetzt ist.

Spezifikationen

Browser-Kompatibilität

Siehe auch

• prefers-color-scheme