Browsergenerierte Benutzeroberfläche gestalten

Webfunktionen: ::selection user-select accent-color color-scheme scrollbar-color scrollbar-width :user-valid und :user-invalid :placeholder-shown ::placeholder field-sizing resize (CSS-Eigenschaft) Anpassbares <select> appearance :has() ::file-selector-button

Die meisten vom Browser generierten Benutzeroberflächen können bis zu einem gewissen Grad mit CSS angepasst werden. Auch wenn moderne Funktionen erforderlich sind, wird sie in älteren Browsern ordnungsgemäß ausgeführt und erfordert daher oft kein Polyfill oder Fallback.

Bevor Sie die Benutzeroberfläche des Browsers (Formularsteuerelemente, Bildlaufleisten, Auswahlen, Fehlermeldungen usw.) neu erstellen, sollten Sie Folgendes prüfen:

  1. die Browser-UI auch mit modernem CSS nicht ausreichend an Ihre Anforderungen angepasst werden kann,
  2. die gewünschte Anpassung ist wichtig genug, um die Nachteile der Neuerstellung der integrierten Benutzeroberfläche zu rechtfertigen – insbesondere den Verlust der barrierefreien Semantik, der Tastaturverarbeitung, des IME und der AT-Integration, die die native Benutzeroberfläche kostenlos bietet.

Beispiele für mögliche Anpassungen:

  • Mit ::selection kannst du die Farben von hervorgehobenem Text anpassen.
  • Wenden Sie user-select: none NICHT auf Inhaltstext an, da dies das Kopieren und Einfügen, Übersetzungstools und die Geste „Ab hier lesen“ von assistiven Technologien beeinträchtigt. Beschränken Sie sie auf die Benutzeroberfläche (Ziehpunkte, Symbolleisten, redundante Schaltflächenbeschriftungen).
  • Verwenden Sie accent-color, um die Akzentfarbe der Seite auf alle vom Browser generierten UI-Elemente anzuwenden.
  • Mit color-scheme kannst du die Browser-UI an den hellen/dunklen Modus anpassen.
  • Verwenden Sie scrollbar-color, um die Farben der Bildlaufleiste anzupassen, und scrollbar-width, um die Breite der Bildlaufleiste zu steuern. Achten Sie darauf, dass sich der Schieberegler deutlich von der Spur unterscheidet (≥ 3:1), und legen Sie scrollbar-width: none nicht für scrollbare Bereiche fest (verwenden Sie es nur, wenn das Scrollen vollständig durch eine andere Funktion ersetzt wird).
  • Verwenden Sie :user-invalid / :user-valid für die Gültigkeitsformatierung, nicht :invalid / :valid. Diese werden nur angewendet, wenn der Nutzer mit dem Feld interagiert hat. So wird vermieden, dass erforderliche leere Felder beim Seitenaufbau als Fehler gekennzeichnet werden. Schließen Sie Bereichsschieberegler aus, wenn Sie input allgemein ausrichten (z.B. input:not(input[type="range"]):user-valid), damit beim Anpassen eines Schiebereglers keine Feldgültigkeitsgrenzen oder ‑hintergründe darauf angewendet werden.
  • Schaltflächen und Textfelder (einschließlich <textarea>) können im Allgemeinen wie normale Elemente formatiert werden.
  • Verwenden Sie font-size für die Skalierung und andere Texteigenschaften, um die Typografie zu steuern.

Textfelder formatieren (<input> und <textarea>)

Für die meisten Styling-Zwecke (z.B. Farben, Rahmen, Hintergründe, Typografie) sollten diese Elemente wie normale Textcontainer behandelt werden.

  • Verwenden Sie :placeholder-shown und ::placeholder, um Eingabeplatzhalter zu formatieren.
  • Verwenden Sie field-sizing: content, um die Größe von Textfeldern an den Inhalt anzupassen.
  • Verwenden Sie für <textarea>-Elemente resize: vertical, um die horizontale Größenänderung zu deaktivieren, oder resize: none, um alle Größenänderungen zu deaktivieren.

Steuerelemente für Multiple-Choice-Fragen (Auswahl, Optionsfelder, Kästchen)

  • Um eine von vielen Optionen in einem Drop-down-Menü auszuwählen, verwenden Sie <select> + appearance: base-select + ::picker(select). Weitere Informationen finden Sie unter Branded Select Styling.
  • Auswahl einer oder mehrerer Optionen, die inline auf der Seite angeordnet sind: Verwenden Sie für jede Option ein <input type=checkbox>- oder <input type=radio>-Element innerhalb eines <label>-Elements. Stil über label:has(:checked).
  • Stile für Kästchen, Optionsfelder und Schalter über appearance: none + generierte Inhalte (::before/::after) oder Hintergrundbilder, um den aktivierten Status darzustellen.

Nicht-textuelle <input>s (Schaltflächen, Schieberegler, Dateieingaben usw.)

  • Dateieingaben: Verwenden Sie ::file-selector-button, um die Schaltfläche zu gestalten.
  • Verwenden Sie <input> nicht mit einem type von button, submit oder reset. Verwenden Sie stattdessen <button> und gestalten Sie es wie ein normales Element.
  • Schieberegler: Verwenden Sie appearance: none + Thumb-Pseudoelemente (::-webkit-slider-thumb, ::-moz-range-thumb usw.) und Track-Pseudoelemente (::-webkit-slider-runnable-track, ::-moz-range-track usw.) für eine detailliertere Steuerung.