Standardmäßig haben Formularsteuerelemente wie <input>, <textarea> und <select> feste Abmessungen. Ihre Größe bleibt konstant, unabhängig davon, wie viele Inhalte der Nutzer eingibt oder auswählt.
Wenn Sie möchten, dass diese Steuerelemente automatisch verkleinert oder vergrößert werden, um ihren Inhalt (einschließlich Platzhaltern) aufzunehmen, verwenden Sie die CSS-Eigenschaft field-sizing: content.
Formularsteuerelemente mit automatischer Größenanpassung
Wenn Sie field-sizing: content für Eingaben, Auswahlen oder Textbereiche festlegen, können diese dynamisch in der Größe angepasst werden, während der Nutzer Optionen eingibt oder auswählt. Sie müssen jedoch übernommene Stile, Layoutstandards und Mindest-/Höchstwerte berücksichtigen, um eine robuste Nutzererfahrung zu gewährleisten.
Um Layoutprobleme zu vermeiden, wird empfohlen, sowohl min-inline-size (oder min-width) als auch max-inline-size (oder max-width) zusammen mit field-sizing: content für Texteingaben festzulegen. Eine Mindestgröße verhindert, dass das Eingabefeld auf eine Breite von null schrumpft, wenn es leer ist (wodurch es nicht mehr anklickbar wäre). Eine maximale Größe sorgt dafür, dass es sich nicht unendlich ausdehnt und das Seitenlayout beeinträchtigt.
Bei Textbereichen kann die automatische horizontale Größenanpassung zu einer unschönen UX führen. Ein Textbereich mit einem langen Platzhalter wird beispielsweise abrupt horizontal verkleinert, wenn der Nutzer ein einzelnes Zeichen eingibt. Um dies zu verhindern, wenden Sie eine explizite Breite (z. B. width: 100%) auf das Textfeld an. Dadurch wird die Textfläche gezwungen, eine stabile horizontale Breite beizubehalten, während die vertikale Größe automatisch angepasst wird, wenn der Inhalt umbrochen wird.
Es wird empfohlen, für <select>-Elemente mit field-sizing: content ein max-inline-size (oder max-width) festzulegen, damit extrem lange ausgewählte Optionen das Seitenlayout nicht beeinträchtigen.
/* Applies horizontal auto-sizing to inputs */
input {
/* Instructs the element to size itself to fit its content */
field-sizing: content;
/* Reset explicit width if inherited from global styles */
width: auto;
/* Prevents the input from collapsing and disappearing when empty */
min-inline-size: 15ch;
/* Prevents infinite horizontal growth */
max-inline-size: 50ch;
}
textarea {
/* Instructs the element to size itself to fit its content */
field-sizing: content;
/* Reset explicit height if inherited from global styles */
height: auto;
/* Use a fixed width to prevent jarring horizontal shifts when replacing a long placeholder */
width: 50ch; /* or 100% depending on your layout */
/* Sets a reasonable minimum height (e.g., 3 lines) for empty textareas */
min-block-size: 3lh;
/* Prevents infinite vertical growth. Once a textarea hits this */
/* height, it will stop growing and show a vertical scrollbar. */
max-block-size: 10lh;
}
select {
/* Sizes the select element to fit the active option only */
field-sizing: content;
/* Prevents the dropdown from expanding infinitely and breaking the layout */
max-inline-size: 50ch;
}
WICHTIG: Explizite width- und height-Attribute überschreiben field-sizing: content für alle Formularsteuerelemente. Wenn im globalen CSS Ihres Projekts Eingaben, Auswahlen oder Textbereiche auf width: 100% festgelegt sind, müssen Sie sie explizit auf width: auto (oder width: fit-content) für die Elemente zurücksetzen, die field-sizing: content verwenden, damit die automatische Größenanpassung funktioniert. Umgekehrt sollten Sie height: auto für Textbereiche explizit festlegen, wenn zuvor global eine feste Höhe festgelegt wurde.
WICHTIG: Bei Grid- und Flexbox-Layouts werden die untergeordneten Elemente oft implizit gestreckt, um den verfügbaren Platz auszufüllen. Wenn sich ein Formularsteuerelement, das field-sizing: content verwendet, nicht verkleinern lässt, prüfen Sie die Ausrichtungseigenschaften des Containers und wenden Sie align-self: start oder justify-self: start auf das Formularsteuerelement an, um die Streckung zu überschreiben.
Fallback-Strategien
field-sizing sollte als progressive Verbesserung behandelt werden. In Browsern, die die Property nicht unterstützen, werden Formularsteuerelemente auf ihr standardmäßiges, festes Größenverhalten zurückgesetzt. Nutzer können dann einfach scrollen, um überlaufende Inhalte in Eingabefeldern und Textbereichen mit fester Größe zu sehen.
Wenn dynamisch wachsende Felder für ältere Browser unbedingt erforderlich sind, müssen Sie die Feature-Erkennung und eine komplexe Problemumgehung verwenden. Die robusteste Fallback-Lösung für Textbereiche verwendet einen CSS-Grid-Trick, bei dem ein ausgeblendetes Pseudoelement die Eingabe des Nutzers in Echtzeit spiegelt und so den Grid-Container (und den darin enthaltenen Textbereich) erweitert.
<!-- The textarea is wrapped in a container that will mirror its value -->
<div class="growable-textarea" data-replicated-value="">
<textarea></textarea>
</div>
// Only attach the fallback event listeners if field-sizing is unsupported
if (!CSS.supports('field-sizing', 'content')) {
document.querySelectorAll('.growable-textarea > textarea').forEach(textarea => {
textarea.addEventListener('input', () => {
textarea.parentNode.dataset.replicatedValue = textarea.value;
});
});
}
/* Only apply the fallback if field-sizing is NOT supported */
@supports not (field-sizing: content) {
.growable-textarea {
display: grid;
}
/* The pseudo-element and textarea must share the exact same cell, font, and padding */
.growable-textarea::after,
.growable-textarea > textarea {
grid-area: 1 / 1 / 2 / 2;
font: inherit;
padding: 0.5rem;
border: 1px solid #999;
}
/* The pseudo-element renders the copied text invisibly to stretch the grid */
.growable-textarea::after {
/* The space is necessary for trailing empty lines to be rendered */
content: attr(data-replicated-value) " ";
white-space: pre-wrap;
visibility: hidden;
}
.growable-textarea > textarea {
resize: none;
overflow: hidden;
}
}
Angesichts der Komplexität, die das Duplizieren von Stilen und das Synchronisieren des Status über DOM-Knoten für jedes Formularsteuerelement mit sich bringt, ist es für die meisten Anwendungen empfehlenswert, sich auf das Standard-Fallback-Verhalten von festen Eingaben zu verlassen, es sei denn, die dynamische Größenanpassung ist für die Nutzerfreundlichkeit entscheidend.