Eigene Anzeigevarianten

Zuletzt geändert am:

Formularelemente verfügen über das Feld Anzeigevariante. Für bestimmte Elemente stehen hier bereits vordefinierte Anzeigevarianten zur Auswahl, z. B. alternative Layouts.

Darüber hinaus haben Sie die Möglichkeit, hier eigene CSS-Klassen einzutragen. So können Sie individuelle visuelle Anpassungen direkt über das Stylesheet Ihrer eingebetteten Website vornehmen – ideal für projektspezifische Designs und Layouts.

CSS-Klasse im Editor definieren

  1. Navigieren Sie zum gewünschten Formularelement.
  2. Gehen Sie im Bearbeitungsbereich zum Feld Anzeigevariante.
  3. Geben Sie Ihre eigene CSS-Klasse ein.

Die eingegebene Klasse wird dem entsprechenden Formularelement im HTML automatisch als zusätzliche Klasse hinzugefügt.

CSS-Datei erstellen und einbinden

Schritt 1: CSS-Datei erstellen

Erstellen Sie eine neue CSS-Datei, beispielsweise mein-custom.css, und speichern Sie diese in einem geeigneten Verzeichnis Ihrer Website.

Schritt 2: CSS-Datei in HTML einbinden

Binden Sie die CSS-Datei in den <head>-Bereich Ihrer Website ein:

Beispiel:

​Schritt 3: CSS-Regeln definieren

Fügen Sie in Ihrer CSS-Datei die entsprechenden Style-Definitionen hinzu:

Beispiel:

Spezifische Elemente gezielt anpassen

Für präzise Anpassungen einzelner Elemente innerhalb eines Formularelements benötigen Sie die entsprechenden CSS-Selektoren. Browser-Entwicklertools helfen Ihnen dabei, diese zu identifizieren:

Entwicklertools verwenden


  1. Öffnen Sie das Formular im Browser.
  2. Starten Sie die Entwicklertools:
    1. Windows/Linux: Strg + Shift + C
    2. macOS: Cmd + Option + I
  3. Aktivieren Sie die Elementauswahl (Pfeil-Symbol in der Toolbar).
  4. Klicken Sie das gewünschte Element an.

Screenshot mit zweigeteilter Ansicht: Links ein Formular mit markiertem Bereich, rechts das geöffnete Browser-Entwicklertool mit hervorgehobener, zugehöriger HTML-Struktur.


Element-Informationen auswerten

Nach der Aktivierung der Elementauswahl, wird Ihnen das HTML von im Formular angeklickten Elementen, dessen Klassennamen und angewendete CSS-Eigenschaften in Ihrem Entwicklertool angezeigt.

Screenshot eines Formulars mit geöffnetem Browser-Entwicklertool. Ein Label einer RadioGroup ist sowohl im Formular als auch im HTML-Code mithilfe der Elementauswahl-Funktion markiert.


Erweiterte CSS-Anpassungen

Mit den über die Browser-Entwicklertools erhaltenen Informationen können Sie nun Ihre Anzeigevariante erweitern, um die Darstellung spezifischer Elemente gezielt anzupassen:
ISO/IEC 27001 Icon
IT-Mittelstand Software Hosted in Germany
IT-Mittelstand Software Made in Germany