Wie wachsen Formularfelder mit field-sizing ohne JS?

field-sizing in CSS: Wie Formularfelder ohne JavaScript mitwachsen

Michael Dobler

Autor Dr. Web

5. August 2026

2 Min. Lesezeit

field-sizing bringt eine alte Frontend-Frickelei zum Verschwinden: Textfelder, die beim Tippen mit ihrem Inhalt mitwachsen, ganz ohne JavaScript. Seit Firefox 152 im Juni 2026 beherrschen alle großen Browser die CSS-Eigenschaft. Für Agenturen und Frontend-Teams fällt damit eine ganze Klasse von Zusatzskripten weg.

drweb.de als bevorzugte Quelle auf Google hinzufügenQualitätsgeprüfte Inhalte direkt in Google News & DiscoverJetzt hinzufügen

field-sizing löst ein Problem, das Entwickler jahrelang nur mit JavaScript umgehen konnten. Ein Kommentarfeld, das beim Tippen von selbst höher wird, brauchte bisher einen Event-Listener und etwas Rechnerei mit der Scrollhöhe. Genau diese Krücke ersetzt jetzt eine einzige Zeile CSS.

Das Wichtigste in Kürze

Eine CSS-Zeile: field-sizing: content lässt Textareas, Eingabe- und Auswahlfelder auf ihren Inhalt schrumpfen und wieder wachsen.
Ohne JavaScript: Der Trick ersetzt Autosize-Bibliotheken wie react-textarea-autosize samt ihren Event-Listenern.
Seit Juni 2026 Baseline: Mit Firefox 152 unterstützen Chrome, Edge, Safari und Firefox die Eigenschaft.
Fallback bleibt: Auf der Stufe „Newly available“ gehört ein @supports-Zweig für ältere Browser weiter dazu.

Was macht field-sizing in CSS genau?

Fächermappe mit Papieren, Aufschrift „wächst von allein“ und Schildkrötenfigur — Die CSS-Eigenschaft field-sizing: content passt Formularfelder an ihren Inhalt an, fixed behält die ursprüngliche Größe

field-sizing steuert, ob ein Formularfeld seine Größe an den Inhalt anpasst oder starr bleibt.

Die Eigenschaft kennt zwei Werte. content lässt das Feld auf den Inhalt schrumpfen und mit jedem Zeichen wachsen, fixed hält die vorgegebene Größe und bleibt der Standard.^[1] Bei einer Textarea steuert content die Höhe, bei einem Eingabefeld die Breite. Selbst ein Auswahlfeld passt sich der sichtbaren Option an.

Welche JavaScript-Bibliotheken ersetzt field-sizing?

field-sizing macht die verbreiteten Autosize-Skripte für Textfelder überflüssig.

Jahrelang lief das wachsende Textfeld über einen Umweg. Ein verstecktes Spiegel-Element nahm denselben Text auf, JavaScript maß dessen Scrollhöhe und schrieb sie zurück auf die Textarea. Fertige Pakete gossen diese Rechnerei in wiederverwendbaren Code, allein react-textarea-autosize kommt bei npm auf Millionen Downloads im Monat.^[3]

Modernes CSS ersetzt an vielen Stellen JavaScript. Scroll-Animationen laufen inzwischen ohne die passende Bibliothek, Anchor Positioning nimmt den Tooltip-Skripten die Arbeit ab. Wie viel Layout der Browser heute allein stemmt, zeigt schon ein schlankes CSS-Reset. Ein Kontaktformular aus reinem HTML und CSS bekommt mit field-sizing die letzte fehlende Zutat.

Jede CSS-Funktion, die ein Skript ablöst, nimmt dem Formular eine Fehlerquelle und dem Browser Ladearbeit ab. field-sizing gehört zu den stillen Verbesserungen, die Nutzer nie bemerken und Entwickler sofort schätzen.
— Markus Seyfferth, Chefredakteur Dr. Web

field-sizing auf einen Blick

Wie eine einzige CSS-Zeile das Autosize-Skript ersetzt

Vom ersten Browser bis Baseline

03/2024

Chrome & Edge

ab Version 123

12/2025

Safari

ab Version 26.2

06/2026

Firefox

ab Version 152, der letzte Browser

Baseline

„Newly available“

seit Juni 2026 in allen großen Browsern

content oder fixed

content

Das Feld wächst und schrumpft mit dem Inhalt. Bei der Textarea ändert sich die Höhe, beim Eingabefeld die Breite.

fixed

Das Feld behält seine vorgegebene Größe. Dieser Wert bleibt der Standard, solange Sie nichts ändern.

Warum sich der Wechsel lohnt

1 Zeile

CSS statt Skript

ersetzt Event-Listener und versteckte Spiegel-Elemente

Millionen

Downloads pro Monat

allein die Bibliothek react-textarea-autosize bei npm

12/2028

„Widely available“

geplante Stufe, die auch ältere Geräte einschließt

Können Sie field-sizing schon einsetzen?

Ja, seit Juni 2026 unterstützen alle großen Browser field-sizing, ein Fallback für ältere Geräte bleibt trotzdem sinnvoll.

Chrome und Edge liefern die Eigenschaft schon seit März 2024, Safari zog Ende 2025 nach, Firefox 152 machte im Juni 2026 den letzten Schritt.^[2] Damit steht field-sizing auf der Baseline-Stufe „Newly available“. Die Stufe „Widely available“, die auch ältere Geräte einschließt, erreicht das Feature planmäßig erst Ende 2028.

Für den Produktiveinsatz genügt eine Absicherung über @supports: Browser ohne Unterstützung behalten die feste Größe, moderne lassen das Feld mitwachsen. Eine Obergrenze über max-height verhindert, dass ein sehr langer Text die Seite sprengt. Bei strengen Vorgaben für alte Firmen-Browser bleibt der bisherige Fallback bestehen.

Für die meisten Projekte lohnt der Umstieg schon heute, weil jede entfernte Autosize-Bibliothek die Seite schlanker und wartungsärmer macht. Ein @supports-Zweig kostet wenige Zeilen und nimmt das Risiko.