appearance

Vor der Standardisierung ermöglichte diese Eigenschaft die Anzeige von Elementen als Widgets, wie Schaltflächen oder Auswahlkästchen. Es wurde als Missfeature betrachtet, und Autoren werden ermutigt, nur noch standardmäßige Schlüsselwörter zu verwenden.

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

none

Verbirgt bestimmte Eigenschaften von Widgets, wie den Pfeil, der in einem Auswahl-Element angezeigt wird und darauf hinweist, dass die Liste erweitert werden kann.

auto

Verhält sich wie none bei Elementen ohne spezielle Gestaltung.

<compat-special>

Eines von menulist-button oder textfield. Beide Werte sind äquivalent zu auto bei Elementen ohne spezielle Gestaltung.

<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 äquivalent zu 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 funktionieren, jedoch nicht mit der standardmäßigen 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 Standard-Styling eines Auswahlkästchens und eines Auswahl-Elements entfernt und ein benutzerdefiniertes Styling angewendet wird. Das Auswahlkästchen wird in einen Kreis umgewandelt, und das Auswahl-Element zeigt, wie man den Pfeil entfernt, der darauf hinweist, 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