appearance

appearance: none;

appearance: auto;

<section id="default-example">
  <div class="background">
    <button id="example-element">button</button>
  </div>
</section>

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

Vor der Standardisierung erlaubte diese Eigenschaft, dass Elemente als Widgets angezeigt wurden, wie Schaltflächen oder Kontrollkästchen. Dies wurde als Fehlfunktion betrachtet und Autoren werden ermutigt, jetzt nur standardisierte Schlüsselwörter zu verwenden.

Für die folgenden Schlüsselwörter wählt der Benutzeragent das geeignete Styling basierend auf dem Element. Einige Beispiele sind angegeben, aber die Liste ist nicht abschließend.

none

Wenn das Element ein Widget (natives Formelement) ist, wird es gezwungen, ein standardisiertes primitives Erscheinungsbild anstelle eines plattformnativen oder betriebssystemspezifischen Erscheinungsbildes zu verwenden, wobei die üblichen CSS-Regeln unterstützt werden. Dieser Wert hat keine Wirkung auf Nicht-Widget-Elemente, einschließlich ersetzter Elemente wie <img> und <video>.

auto

Wirkt wie none auf Elementen ohne besonderes Styling.

base-select

Wählt das <select>-Element und das ::picker(select)-Pseudoelement in die vom Browser definierten Standardstile und Verhaltensweisen für anpassbare Auswahl Elemente ein.

Hinweis: Die Spezifikation definiert derzeit den base-Wert, der dazu gedacht ist, Basis-Browser-Stile allgemeiner auf UI-Elemente anzuwenden, für die sie verfügbar sind. Allerdings wird dies derzeit in keinem Browser unterstützt.

<compat-special>

Einer von menulist-button oder textfield. Beide dieser Werte sind auf Elementen ohne besonderes Styling gleichwertig mit auto.

<compat-auto>

Mögliche Werte sind button, checkbox, listbox, menulist, meter, progress-bar, push-button, radio, searchfield, slider-horizontal, square-button und textarea. Schlüsselwörter, die dem auto-Wert entsprechen, um die Kompatibilität mit älteren Browsern aufrechtzuerhalten.

Nicht standardisierte Werte

Die folgenden Werte können auf historischen Browserversionen mit dem Präfix -moz-appearance oder -webkit-appearance funktionieren, jedoch nicht auf der standardisierten appearance-Eigenschaft.

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  

Das folgende Beispiel zeigt, wie man das Standardstyling von einem Kontrollkästchen und einem Auswahl-Element entfernt und benutzerdefiniertes Styling anwendet. Das Erscheinungsbild des Kontrollkästchens wird in einen Kreis geändert, und das Auswahl-Element zeigt, wie man den Pfeil entfernt, der anzeigt, dass die Liste erweitert werden kann.

HTML

<input type="checkbox" />
<input type="checkbox" checked />

<select>
  <option>default</option>
  <option>option 2</option>
</select>
<select class="none">
  <option>appearance: none</option>
  <option>option 2</option>
</select>

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

Um die Funktionalität für benutzerdefinierte Auswahl zu aktivieren, müssen dem <select>-Element und seinem Picker ein appearance-Wert von base-select zugewiesen werden:

select,
::picker(select) {
  appearance: base-select;
}

Sie könnten dann beispielsweise den Standard-Schwarz border des Pickers entfernen:

::picker(select) {
  border: none;
}

• prefers-color-scheme