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 der Effekt des angegebenen Wertes, falls vorhanden, hängt vom jeweiligen Element ab.

none

Verleiht dem Widget ein primitives Erscheinungsbild, wodurch es über CSS stilisiert werden kann, während die native Funktionalität des Widgets beibehalten wird. Dieser Wert beeinflusst keine Nicht-Widgets.

auto

Setzt interaktive Widgets so, dass sie mit ihrem betriebssystemspezifischen Erscheinungsbild gerendert werden. Funktioniert wie none bei Elementen ohne betriebssystemspezifisches Styling.

base-select

Nur relevant für das <select>-Element und das ::picker(select)-Pseudo-Element, wodurch sie gestylt werden können.

<compat-special>

Hat bei bestimmten Elementen eine ähnliche Wirkung wie auto.

textfield

Führt dazu, dass das Erscheinungsbild bestimmter <input>-Typen dem des text-Typs entspricht.

menulist-button

Wenn auf das <select>-Element gesetzt, stimmt der Stil des Dropdown-Auswahlelements mit seinem Standardzustand überein.

<compat-auto>

Enthalten für die Abwärtskompatibilität; mögliche Werte beinhalten 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-standardmäßige Werte

Einige nicht-standardmäßige Werte werden auch in einigen Browsern unterstützt:

slider-vertical

Macht den Slider vertikal, 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.

Beschreibung

Die appearance-Eigenschaft ermöglicht es, Elemente im betriebssystemspezifischen Stil basierend auf dem Thema des Betriebssystems anzuzeigen sowie jegliches plattformnativen Styling mit dem Wert none zu entfernen. Das Setzen von appearance: none oder das Ändern 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-Kontrollen (Widgets) typischerweise vom Browser unter Verwendung der nativen UI-Stile des Betriebssystems gerendert. Dieses native Erscheinungsbild unterscheidet sich zwischen Betriebssystemen und Browsern. In diesem Standardzustand bieten Widgets begrenzte, wenn überhaupt, Features, die mit CSS gestylt werden können. 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 Betriebssystemkontrollen 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 mit CSS stilisiert werden kann, während die Funktionalität und native Benutzerinteraktionen erhalten bleiben.

Einige Widgets verschwinden vollständig, wenn appearance: none gesetzt ist. Die versteckten Steuerungen bleiben jedoch interaktiv. Zum Beispiel wird durch Klicken auf ein <label>, das mit einem appearance: none-Checkbox verknüpft ist, der angekreuzte Zustand der Box umgeschaltet.

Da none dazu führen kann, dass ein Widget ausgeblendet wird, wird der base-Wert hinzugefügt, um Widgets mit einem Basiseerscheinungsbild zu versehen. Bei Unterstützung sorgt der base-Wert dafür, dass Widgets ihr nativen Erscheinungsbild beibehalten, während CSS verwendet werden kann, um Styles eines Widgets zu ändern, die standardmäßig nicht änderbar sind. Im Gegensatz zu none, das Radioknöpfe und Kontrollkästchen verschwinden lassen kann, gibt base dem Widget ein primitives Erscheinungsbild mit standardmäßig nutzbaren und interoperablen nativen Styles sowie eine gute Anpassungsmöglichkeit über CSS. Während dieser base-Wert noch nicht unterstützt wird, bieten die vielen <compat-auto>-Werte eine ähnliche Funktionalität, sind jedoch typenspezifisch 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 Auswahlelement (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 Select (oder anderen Elementen) mithilfe von CSS-Anker-Positionierung positioniert werden. Darüber hinaus führt der base-select-Wert dazu, dass das <select> nicht außerhalb des Browserfensters gerendert wird oder eingebaute mobile Betriebssystemkomponenten auslöst. Es wird auch nicht mehr basierend auf der Breite der breitesten <option>-Elemente dimensioniert.

Vorgehängte nicht-standardisierte Werte

Vor der Standardisierung erlaubten die vorgehangenen -moz-appearance und -webkit-appearance Eigenschaften, dass Elemente als Widgets wie Buttons oder Kästchen angezeigt werden. Die folgenden nicht-standardisierten Werte können in alten Stylesheets auftreten, am häufigsten als Werte von Shadow-DOM-Komponenten vorgehängten Pseudo-Elementen.

Autoren wird empfohlen, nur standardisierte 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

Grundlegendes Beispiel

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

HTML

Wir fügen zwei number-Formularsteuerungen zusammen mit ihren Beschriftungen 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, um wie ein Textfeld auszusehen.

.text {
  appearance: textfield;
}

Ergebnisse

Je nach Browser kann der Spinner 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: Auch wenn es keinen Spinner mehr zum Anklicken geben mag, werden die Pfeiltasten weiter oben und unten den Wert inkrementieren und dekrementieren.

Appearance auf none gesetzt

Das folgende Beispiel zeigt, wie Sie das Standardstyling von einem Kontrollkästchen, einem Optionsfeld und einem <select>-Element entfernen und benutzerdefiniertes Styling anwenden können.

HTML

Wir fügen Paare von Kontrollkästchen, Optionsfeldern und <select>-Elementen zusammen mit ihren zugehörigen Beschriftungen 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 Stile auf beide <input>-Elemente des Typs checkbox an; diese Stile erzeugen ein rotes Quadrat, wenn das Element gestaltbar ist. Wir setzen appearance: none auf den :checked-UI-Zustand für alle Eingaben (checkbox und radio) sowie auf Elemente mit der Klasse .none. Dies entfernt das gesamte Style des Optionsfeldes und der Kontrollkästchen, abgesehen von den Rändern, und ermöglicht das Anwenden gestellter Styles. Es gibt keine alternativen Styles für die Optionsfelder 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 zu verstecken. Das nicht markierte Kontrollkästchen, dessen appearance auf auto voreingestellt ist, 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 auch das nicht markierte Optionsfeld wie das native UI-Widget aus, weil es das auch ist. Im markierten Zustand verschwindet das Optionsfeld mit angewendetem appearance: none; seine Funktionalität bleibt erhalten, und nur seine Ränder beeinflussen das Rendering der Seite.

Das Erscheinungsbild eines Selects setzen

Wir können die appearance-Eigenschaft verwenden, um benutzerdefinierte Select-Funktionalitäten zu verwenden, indem wir das <select>-Element und seinen Picker stylen, der den Teil des Formularsteuerelements darstellt, der aus der Seite herausspringt.

HTML

Wir fügen drei <select>-Elemente ein, mit denselben mehreren <option>-Kindern. 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 mit 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> ist standardmäßig im auto-Zustand:

.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 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-Stile auf alle <select>-Elemente und ihre Picker definiert sind, wirken sich die ::picker(select)-Stile nur auf den Picker aus, wenn 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äts-Schlüsselwort ist.

Beachten Sie, dass die Inline-Größe des <select> standardmäßig 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 ist, sodass er nicht durch die umgebende Seite eingeschränkt ist und daher vollständig sichtbar ist. Diese Aussagen sind nicht mehr wahr, wenn base-select gesetzt ist.

Spezifikationen

Browser-Kompatibilität

Siehe auch

• prefers-color-scheme