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, wie Schaltflächen oder Kontrollkästchen, angezeigt werden. Es wurde als Missfeature betrachtet und Autoren wird empfohlen, jetzt nur standardisierte Schlüsselwörter zu verwenden.

Für die folgenden Schlüsselwörter wählt der User Agent das passende Styling basierend auf dem Element aus. Einige Beispiele sind angegeben, aber die Liste ist nicht erschöpfend.

none

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

auto

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

<compat-special>

Einer von menulist-button oder textfield. Beide dieser Werte entsprechen 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 das Äquivalent von auto zur Aufrechterhaltung der Kompatibilität mit älteren Browsern sind.

Nicht-standardisierte Werte

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

appearance = 
  none              |
  auto              |
  base              |
  <compat-auto>     |
  <compat-special>  

<compat-auto> = 
  searchfield   |
  textarea      |
  checkbox      |
  radio         |
  menulist      |
  listbox       |
  meter         |
  progress-bar  |
  button        

<compat-special> = 
  textfield        |
  menulist-button  

Das folgende Beispiel zeigt, wie das Standardstyling von einem Kontrollkästchen und einem Auswahl-Element entfernt und benutzerdefiniertes Styling angewendet wird. Das Erscheinungsbild des Kontrollkästchens wird in einen Kreis geändert, und das Auswahl-Element zeigt, wie der Pfeil entfernt wird, 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

• prefers-color-scheme