appearance

Vor der Standardisierung ermöglichte diese Eigenschaft, Elemente als Widgets, wie Schaltflächen oder Kontrollkästchen, darzustellen. Dies wurde als Fehler angesehen, und Autoren werden ermutigt, nur noch standardisierte Schlüsselwörter zu verwenden.

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 erschöpfend.

none

Wenn das Element ein Widget (ein nativer Formsteuerelement) ist, wird es gezwungen, ein standardisiertes primitives Aussehen anstelle eines plattformnativen oder betriebssystemspezifischen Aussehens zu verwenden, 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

Wirkt wie none bei Elementen ohne spezielles Styling.

<compat-special>

Eines von menulist-button oder textfield. Beide Werte sind bei Elementen ohne spezielles Styling gleichbedeutend 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 gleichbedeutend mit auto sind, um die Kompatibilität mit älteren Browsern zu erhalten.

Nicht-standardisierte Werte

Die folgenden Werte können in historischen Browserversionen mit dem Präfix -moz-appearance oder -webkit-appearance funktional sein, 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 ein eigenes Styling angewendet wird. Das Aussehen des Kontrollkästchens wird zu einem 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