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 ermöglichte diese Eigenschaft die Darstellung von Elementen als Widgets, wie Schaltflächen oder Kontrollkästchen. Es 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 entsprechende Styling basierend auf dem Element aus. Einige Beispiele sind angegeben, aber die Liste ist nicht erschöpfend.

none

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

auto

Verhält sich wie none bei Elementen ohne spezielles Styling.

base-select

Optiert das <select>-Element und das ::picker(select)-Pseudoelement in die von der Browser-definierten Standardstile und Verhalten für anpassbare Auswahl-Elemente ein.

Hinweis: Die Spezifikation definiert derzeit den Wert base, der beabsichtigt ist, Standardstile des Browsers allgemeiner für UI-Elemente anzuwenden, für die sie verfügbar sind. Dies wird jedoch derzeit in keinem Browser unterstützt.

<compat-special>

Einer von menulist-button oder textfield. Beide dieser Werte sind gleichbedeutend mit auto bei Elementen ohne spezielles Styling.

<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 gleichbedeutend mit auto sind, um die Kompatibilität mit älteren Browsern aufrechtzuerhalten.

Nicht-standardisierte Werte

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

appearance = 
  none              |
  auto              |
  base              |
  <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 Standardstiling 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 entfernen kann, 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 sich für die benutzerdefinierte Auswahlfunktionalität zu entscheiden, müssen das <select>-Element und sein Auswahlfeld beide einen appearance-Wert von base-select auf ihnen gesetzt haben:

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

Sie könnten dann zum Beispiel die Standard-Umrandung des Auswahlfelds entfernen:

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

• prefers-color-scheme