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, Elemente als Widgets anzuzeigen, wie z.B. Schaltflächen oder Kontrollkästchen. Es wurde als Fehlfunktion angesehen, und Autoren werden ermutigt, jetzt nur noch standardmäßige 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 vollständig.

none

Wenn das Element ein Widget (native Formsteuerung) ist, wird es gezwungen, ein standardisiertes primitives Aussehen anstelle eines plattformeigenen oder betriebssystemspezifischen Aussehens zu verwenden, das die üblichen Regeln von CSS unterstützt. Dieser Wert hat keine Auswirkung auf Nicht-Widget-Elemente, einschließlich ersetzter Elemente wie <img> und <video>.

auto

Wirkt wie none auf Elemente ohne spezielles Styling.

base-select

Wählt das <select>-Element und das ::picker(select)-Pseudo-Element in die vom Browser definierten Standardstile und das Verhalten für anpassbare Auswahl-Elemente ein.

Hinweis: Die Spezifikation definiert derzeit den base-Wert, der allgemeinere Basisstile des Browsers für UI-Elemente, bei denen sie verfügbar sind, anwenden soll. Dies wird jedoch derzeit in keinem Browser unterstützt.

<compat-special>

Einer von menulist-button oder textfield. Beide dieser Werte sind gleichbedeutend mit auto auf 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 zu auto für die Aufrechterhaltung der Kompatibilität mit älteren Browsern sind.

Nicht standardisierte Werte

Die folgenden Werte können in historischen Browserversionen mit dem Präfix -moz-appearance oder -webkit-appearance funktionsfähig sein, aber nicht in 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 Standardstyling eines Kontrollkästchens und eines Auswahl-Elements entfernt und benutzerdefiniertes Styling anwendet. Das Aussehen des Kontrollkästchens wird in einen Kreis geändert, und das Auswahl-Element zeigt, wie man den Pfeil entfernt, 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 Funktionalität eines benutzerdefinierten Auswahl-Elements zu aktivieren, müssen das <select>-Element und dessen Picker beide einen appearance-Wert von base-select setzen:

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

Sie könnten dann beispielsweise die Standard-Schwarz border des Pickers entfernen:

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

• prefers-color-scheme