CSS/Eigenschaften/Anzeige/appearance

Die Eigenschaft appearance (engl. Aussehen, Erscheinung) sollte es ursprünglich ermöglichen, Formularelementen ihr betriebssystemspezifisches Aussehen zu nehmen. Die Spezifikation führt die Eigenschaft unter der Überschrift "Gestaltung von Widgets" auf und definiert ein Widget als ein Element, das ein „natives Erscheinungsbild“ haben kann. Damit ist gemeint, dass das Betriebssystem, auf dem der Browser läuft, für dieses Element ein eigenständiges Steuerelement anbietet.

Browser haben in diesem Fall die Möglichkeit, die Darstellung solcher Elemente dem Betriebssystem zu überlassen, was die Einflussmöglichkeiten reduziert, die man mit CSS auf diese Elemente hat. Die Idee der appearance-Eigenschaft ist es, die native Darstellung zu verhindern und die Darstellung durch den Browser zu erzwingen, so dass ein vollständiges Styling möglich ist.

• 
• 
• 
• 
• 
• 

Details: caniuse.com

Achtung!

Für diese Eigenschaft gibt es einander widersprechende Umsetzungen.

Verhalten gemäß (geplanter) Spezifikation

Der aktuelle Entwurf der Spezifikation (CSS Basic User Interface Module Level 4 vom 24.01.2020) sieht für die appearance Eigenschaft fünf Werte vor. Zwei davon sind allgemeingültig, die anderen sind eingeschränkt nutzbar. Darüber hinaus gibt es eine lange Liste von „Kompatibilitätswerten“, die früher einmal Teil der Spezifikation waren und mit denen es möglich sein sollte, das Erscheinungsbild von HTML Elementen beliebig zu verändern beispielsweise ein Textfeld wie eine Checkbox darzustellen. Diese Idee wurde glücklicherweise vom W3C wieder verworfen und die entsprechenden Werte sollen nun von den Browsern wie auto gedeutet werden.

Die aktuellsten Browser benötigen kein Browserpräfix mehr für diese Eigenschaft. Zur Unterstützung von LTS-Versionen kann man aber noch -webkit-appearance und -moz-appearance hinzufügen. Die Varianten für Microsoft und Opera (-ms- und -o- Prefix) gibt es nicht und gab es nie.

Beispiel ansehen …

button {
    display: block;
    margin: .5em 1em;
}
button.none {
    -moz-appearance: none;
    -webkit-appearance: none;
    appearance: none;
}

<h2>appearance: none;</h2>
<form>
     <button class="none">Ich bin ein Button, wie ihn der Browser malt.</button>
     <button class="none">Button</button>
</form>

ansehen …

Erlaubt sind folgende Werte:

none

(Laut Spec der Standardwert) die Darstellung erfolgt durch den Browser

auto

(de facto Standardwert in Firefox 86 und Chrome 89) die Darstellung kann dem Betriebssystem überlassen werden - muss aber nicht.

button

das Element wird mit dem Aussehen und Verhalten (Look and Feel) eines Buttons dargestellt. Hat für input, textarea, meter, progress und select-Elemente im Listbox-Stil keinen Effekt. Auf select-Elemente im Dropdown-Stil dagegen schon.

textfield

soll <input type="search"> Elemente wie normale Textfelder darstellen.

menulist-button

soll für Dropdown-select Elemente die Darstellung als Dropdown-Box erzwingen, inclusive des Dropdown-Pfeils, ohne dafür notwendigerweise auf eine Darstellung durch das Betriebssystem zurückzugreifen. Insbesondere soll erreicht werden, dass die CSS Eigenschaften wie color, background-color und border nicht ignoriert werden.

Die Realität

Aktuell (Stand März 2021) ist die Unterstützung in den Browsern sehr rudimentär. Der Default ist appearance: auto, mit appearance:none ergeben sich je nach Browser leichte oder deutliche Darstellungsunterschiede.

• Das Entfernen des Dropdown-Pfeils für eine Listbox ist mit appearance:none möglich. Je nach Browser sind weitere Styles nötig, um brauchbare Abstände zwischen Rändern und Text zu erhalten.
• Der Rückbau eines search-Feldes zu einem normalen Textfeld funktioniert in Chrome nicht (im Firefox gibt es zwischen den beiden ohnehin keinen visuellen Unterschied)
• Die Darstellung eines Elements als Button scheint überhaupt nicht zu funktionieren.

Beispiel ansehen …

a {
    appearance: button;
}
.not-native {
    appearance: none;
}

<h2>appearance: button;</h2>
  <a href="#">Ich bin ein Link und weigere mich, mein Erscheinungsbild zu ändern.</a>
<h2>appearance: none;</h2>
  <label>Ein Dropdown-Select mit Browser-Styling:
    <select>
      <option value="1">Self</option>
      <option value="2">HTML</option>
      <option value="3">Wiki</option>
    </select>
  </label>
  <label> - und ohne:
    <select class="not-native">
      <option value="1">Self</option>
      <option value="2">HTML</option>
      <option value="3">Wiki</option>
    </select>
  </label>

Das zweite Select-Element wird vom Browser gezeichet und die Darstellung hängt stark von den Browser-Stylesheets ab. Firefox stellt es noch halbwegs lesbar dar, in Chrome fehlen jegliche Paddings.

ansehen …

Beachten Sie: Auch der alte Microsoft Edge (vor der Umstellung auf Chromium) unterstützte die -webkit-Variante.

Siehe auch

• Buttons mit CSS gestalten

Weblinks

• css-tricks.com: appearance