Textbereich CSS-Vorlagen

CSS-Vorlagen für Textfelder bei längeren Antworten

Ein Textfeld sammelt Sätze, nicht Namen oder E-Mail-Adressen. Daher sind die Regeln für einzeilige Felder zu eng. Eine Vorlage legt den Schreibbereich fest: wie tief das Feld geöffnet wird, wie der Text darin angeordnet ist, wie weit er verschoben werden kann und was sich beim Fokussieren ändert.

Ein zuverlässiger Ausgangspunkt bietet dem Feld volle Breite, eine maximale Höhe von ca. 640 Pixeln, eine minimale Höhe von ca. 140 Pixeln, einen Innenabstand von ca. 12 x 14 Pixeln, einen dünnen grauen Rahmen mit kleinem Radius, vererbte Typografie, eine Zeilenhöhe von 1,5, nur vertikale Größenänderung und eine anpassbare Rahmenbox.

Größe, Innenabstand, Größenänderung, Fokuszustände

Jede dieser Einstellungen hat ihren Sinn:

• „min-height“ öffnet das Feld so tief, dass die ersten Zeilen einer Antwort während des Schreibens sichtbar bleiben;

• Die Einstellung „max-width“ auf 100 % mit „box-sizing: border-box“ sorgt dafür, dass das Eingabefeld auf schmalen Bildschirmen innerhalb seines Containers bleibt und das Layout nicht seitlich verschoben wird.

Eine Zeilenhöhe von ca. 1,5 sorgt dafür, dass längere Antworten während der Eingabe gut lesbar bleiben, nicht nur nach dem Absenden.

„resize: vertical“ ermöglicht es Nutzern, das Eingabefeld zu vergrößern, verhindert aber gleichzeitig das seitliche Verschieben, das die umgebende Spalte beschädigen könnte.

Eine sichtbare Fokusumrandung oder eine kräftigere Rahmenfarbe zeigt an, welches Feld aktiv ist – besonders wichtig für Tastaturnutzer.

Zwei Kompromisse sind erwähnenswert: Eine hohe, feste Höhe wirkt auf einem Desktop-Computer großzügig, auf einem Smartphone jedoch unpraktisch. Daher ist eine Mindesthöhe plus eine prozentuale Breite sicherer. „resize: none“ schützt zwar das Layout, führt aber dazu, dass Antworten, die länger sind als erwartet, nicht korrekt angezeigt werden. Eine maximale Höhe mit automatischem vertikalem Überlauf löst dieses Problem eleganter.

Drei praktische Stilvarianten

Ein kompaktes Feedback-Feld kann mit einer minimalen Tiefe von ca. 90 Pixeln und geringem Innenabstand (Padding) auskommen, da es realistischerweise maximal zwei bis drei Sätze umfasst. Eine Supportanfrage benötigt 180 Pixel Tiefe, eine größere Zeilenhöhe und eine maximale Höhe, damit der eingefügte Text scrollbar ist und das Layout nicht verzerrt. Ein Projektbriefing geht noch weiter: eine größere maximale Tiefe von ca. 240 Pixeln und ausreichend Innenabstand, sodass der Vollbildmodus den Rand nicht berührt.

Benutzerdefinierte Klassenregeln ohne Neuaufbau

Nicepage deckt das Standard-Erscheinungsbild über die Formulareingabe-Formatierung ab, einschließlich Schriftart, Füllung, Rahmen und verwandter Eigenschaften. Wenn ein mehrzeiliges Feld ein eigenes Verhalten benötigt, ist benutzerdefinierter CSS-Code die elegantere Lösung: Weisen Sie im Eigenschaftenfenster eine Klasse wie „feedback-textarea“ zu und wenden Sie dann eine einzelne Regel an, um die minimale Tiefe, die vertikale Skalierung, den Fokusrahmen und die Breite auf Mobilgeräten zu steuern. Die Dokumentation zu benutzerdefiniertem CSS erklärt, wie Sie Regeln hinzufügen und Klassen zuweisen.

Wählen Sie eine Vorlage basierend auf dem erwarteten Textumfang und dem Verhalten des Feldes bei Überschreitung des zulässigen Umfangs, nicht basierend auf dessen Aussehen im leeren Zustand.