appearance

Baseline Widely available *

This feature is well established and works across many devices and browser versions. It’s been available across browsers since March 2022.

* Some parts of this feature may have varying levels of support.

Die appearance CSS-Eigenschaft wird verwendet, um UI-Elemente mit plattformspezifischem Styling, basierend auf dem Theme des Betriebssystems, anzuzeigen.

Probieren Sie es aus

appearance: none;

appearance: auto;


  

    
  




.background {
  display: flex;
  place-content: center;
  place-items: center;
  width: 150px;
  height: 150px;
  background-color: white;
}

Vor der Standardisierung erlaubte diese Eigenschaft, Elemente als Widgets anzuzeigen, wie z.B. Schaltflächen oder Kontrollkästchen. Es wurde als Fehlfunktion angesehen, und Autoren werden ermutigt, jetzt nur noch standardmäßige Schlüsselwörter zu verwenden.

Hinweis: Wenn Sie diese Eigenschaft auf Websites verwenden möchten, sollten Sie sie sehr sorgfältig testen. Obwohl sie in den meisten modernen Browsern unterstützt wird, variiert ihre Implementierung. In älteren Browsern hat selbst das Schlüsselwort none nicht dieselbe Wirkung auf alle Formularelemente in verschiedenen Browsern, und einige unterstützen es überhaupt nicht. Die Unterschiede sind in den neuesten Browsern geringer.

Syntax

css
/* 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;

/*  values have the same effect as 'auto' */
appearance: button;
appearance: checkbox;

Werte

Für die folgenden Schlüsselwörter wählt der Benutzeragent das passende Styling basierend auf dem Element aus. Einige Beispiele werden bereitgestellt, aber die Liste ist nicht vollständig.

none

Wenn das Element ein Widget (native Formsteuerung) ist, wird es gezwungen, ein standardisiertes primitives Aussehen anstelle eines plattformeigenen oder betriebssystemspezifischen Aussehens zu verwenden, das die üblichen Regeln von CSS unterstützt. Dieser Wert hat keine Auswirkung auf Nicht-Widget-Elemente, einschließlich ersetzter Elemente wie und .

auto

Wirkt wie none auf Elemente ohne spezielles Styling.

base-select

Wählt das

CSS

css
input {
  appearance: none;
  width: 1em;
  height: 1em;
  display: inline-block;
  background: red;
}
input:checked {
  border-radius: 50%;
  background: green;
}

select {
  border: 1px solid black;
  font-size: 1em;
}

select.none {
  appearance: none;
}

Ergebnis