Textbereich CSS-Vorlagen

Textarea-CSS-Vorlagen für lange Antworten

Ein Textarea-Feld erfasst ganze Sätze und nicht nur einen Namen oder eine E-Mail-Adresse. Regeln für einzeilige Felder wirken hier daher schnell beengend. Was eine Vorlage im Wesentlichen bestimmt, ist der Schreibbereich: wie hoch sich das Feld öffnet, wie der Text darin platziert ist, wie weit es vergrößert werden kann und was sich beim Fokussieren ändert.

Ein verlässlicher Ausgangspunkt bietet dem Feld die volle Breite, eine Obergrenze um 640px, eine Mindesthöhe von etwa 140px, ein Padding von circa 12px mal 14px, einen dezenten grauen Rahmen mit kleinem Radius, vererbte Typografie, eine Zeilenhöhe von 1.5, rein vertikale Größenänderung und Border-Box-Sizing.

Größe, Innenabstand, Größenänderung, Fokus-Zustände

Jede dieser Entscheidungen hat ihre Berechtigung:

• „min-height“ öffnet das Feld weit genug, damit die ersten Zeilen einer Antwort beim Schreiben sichtbar bleiben;
• „max-width“ bei 100% mit „box-sizing: border-box“ hält das Feld auf schmalen Bildschirmen innerhalb seines Containers, anstatt das Layout seitlich zu verschieben;
• „line-height“ um 1.5 sorgt dafür, dass ein langer Text bereits bei der Eingabe gut lesbar bleibt und nicht erst nach dem Absenden;
• „resize: vertical“ erlaubt es Nutzern, das Feld zu vergrößern, verhindert jedoch das seitliche Ziehen, das umgebende Spalten zerstört;
• Eine sichtbare Fokus-Kontur oder eine kräftigere Rahmenfarbe signalisiert das aktive Feld, was besonders für Tastaturnutzer wichtig ist.

Zwei Kompromisse sollten bedacht werden. Eine starre, große Höhe wirkt auf dem Desktop großzügig, auf dem Smartphone jedoch sperrig; daher sind eine Mindesthöhe und eine prozentuale Breite sicherer. Und „resize: none“ schützt zwar das Layout, schränkt Nutzer jedoch ein, deren Antwort länger ausfällt als gedacht; eine maximale Höhe mit automatischem vertikalem Scrollbalken löst dies wesentlich eleganter.

Drei praxisnahe Stilvarianten

Ein kompaktes Feedback-Feld kommt mit einer Mindesthöhe von 90px und engerem Innenabstand aus, da zwei bis drei Sätze das realistische Maximum bilden. Eine Support-Anfrage benötigt eher 180px, eine lockerere Zeilenhöhe und eine maximale Höhe, damit eingefügte Protokolle scrollen, statt das Layout zu dehnen. Ein Projekt-Briefing geht noch weiter: eine breitere Maximalbreite, etwa 240px Tiefe und ausreichend Innenabstand, damit vollflächiger Text den Rahmen nicht berührt.

Eigene Klassenregeln ohne Neuaufbau

Nicepage deckt die standardmäßige Darstellung über Form Input Styling ab, einschließlich Schriftart, Füllung, Rahmen und zugehörigen Eigenschaften. Benötigt ein mehrzeiliges Feld ein spezifisches Verhalten, ist Custom CSS Code der direktere Weg: Weisen Sie im Property Panel eine Klasse wie „feedback-textarea“ zu und steuern Sie mit einer einzelnen CSS-Regel Mindesthöhe, vertikale Größenänderung, Fokus-Rahmen und mobile Breite. Die Dokumentation zu Custom CSS erläutert das Hinzufügen von Regeln und Zuweisen von Klassen.

Wählen Sie eine Vorlage nach dem erwarteten Textumfang und dem gewünschten Verhalten bei Überschreitung dieses Rahmens aus – nicht danach, wie das Feld im leeren Zustand aussieht.