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 das Anzeigen von Elementen als Widgets, wie Schaltflächen oder Kontrollkästchen. Sie wurde als Fehlfunktion angesehen und Autoren wird empfohlen, jetzt nur standardisierte Schlüsselwörter zu verwenden.

Für die folgenden Schlüsselwörter wählt der Benutzeragent das passende Styling basierend auf dem Element. Es werden einige Beispiele bereitgestellt, aber die Liste ist nicht erschöpfend.

none

Wenn das Element ein Widget (natürliches Formularelement) ist, wird es gezwungen, ein standardisiertes primitives Aussehen anstelle eines plattformnativen oder betriebssystemspezifischen Aussehens zu verwenden, unter Beachtung der üblichen CSS-Regeln. Dieser Wert hat keine Wirkung auf nicht-widget Elemente, einschließlich ersetzter Elemente wie <img> und <video>.

auto

Wirkt wie none bei Elementen ohne spezielle Gestaltung.

base-select

Wählt das <select>-Element und das ::picker(select) Pseudoelement in die browserdefinierten Standardstile (base) und das Verhalten für anpassbare Select-Elemente.

Hinweis: Die Spezifikation definiert momentan den base Wert, der beabsichtigt ist, die grundlegenden Browserstile 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 entsprechen 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 das Äquivalent von auto zur Aufrechterhaltung der Kompatibilität mit älteren Browsern sind.

Nicht standardisierte Werte

Die folgenden Werte können in historischen Browserversionen mit dem -moz-appearance oder -webkit-appearance Präfix funktionieren, aber nicht mit 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 das Standardstyling von einem Kontrollkästchen und einem Select-Element entfernt und benutzerdefiniertes Styling angewendet wird. Das Aussehen des Kontrollkästchens wird in einen Kreis geändert, und das Select-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

Um die benutzerdefinierte Select-Funktionalität zu aktivieren, müssen sowohl das <select>-Element als auch sein Picker einen appearance Wert von base-select gesetzt haben:

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

Sie könnten dann zum Beispiel den Standardnach border des Pickers entfernen:

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

• prefers-color-scheme