Wie kann man die Größenänderung eines Textbereichs deaktivieren?

Leon A. -

Problem: Unerwünschte Größenänderung von Textfeldern

HTML-Formulare haben oft standardmäßig eine Funktion zur Größenänderung von Textfeldern. Dies kann das Layout und Design einer Webseite beeinflussen, besonders wenn Sie das Erscheinungsbild des Formulars kontrollieren möchten.

Deaktivieren der Textfeld-Größenänderung mit CSS

Verwendung der Resize-Eigenschaft

Die CSS-Eigenschaft resize steuert, ob ein Element vom Benutzer in der Größe verändert werden kann. Bei Textfeldern können Sie diese Eigenschaft verwenden, um das standardmäßige Größenänderungsverhalten zu deaktivieren.

Um die Größenänderung zu deaktivieren, verwenden Sie dieses CSS:

textarea {
  resize: none;
}

Diese CSS-Regel setzt die resize-Eigenschaft auf none, was jegliche Größenänderung des Textfeldes verhindert.

Tipp: Konsistentes Layout beibehalten

Das Deaktivieren der Textfeld-Größenänderung hilft, ein konsistentes Layout auf Ihrer Webseite beizubehalten und verhindert, dass Benutzer versehentlich das Design verändern.

Anwendung der Resize-Eigenschaft auf alle Textfelder

Um die Größenänderung für alle Textfelder auf einer Webseite zu deaktivieren, wenden Sie die CSS-Regel global an:

textarea {
  resize: none;
}

Diese Regel zielt auf alle <textarea>-Elemente ab und deaktiviert deren Größenänderung.

Gezielte Anwendung auf bestimmte Textfelder

Für mehr Kontrolle können Sie die Größenänderung für bestimmte Textfelder deaktivieren:

  • Mit einer Klasse:

    .no-resize {
resize: none;
}

    Wenden Sie dies auf ein Textfeld an mit: <textarea class="no-resize"></textarea>

  • Mit einer ID:

    #comment-box {
resize: none;
}

    Wenden Sie dies auf ein Textfeld an mit: <textarea id="comment-box"></textarea>

  • Mit einem Name-Attribut:

    textarea[name="message"] {
resize: none;
}

    Wenden Sie dies auf ein Textfeld an mit: <textarea name="message"></textarea>

Alternative Größenänderungsoptionen

Nur vertikale Größenänderung

Sie können Benutzern erlauben, die Größe eines Textbereichs nur vertikal zu ändern, während die Breite fixiert bleibt. Dies ist nützlich, wenn Sie den Benutzern eine gewisse Kontrolle über die Größe des Textbereichs geben möchten, ohne das Layout Ihrer Seite zu verändern. Um nur vertikale Größenänderung zu aktivieren, verwenden Sie dieses CSS:

textarea {
  resize: vertical;
}

Diese Regel ermöglicht es, die Höhe des Textbereichs zu ändern, während die Breite gleich bleibt.

Tipp: Übermäßige Größenänderung verhindern

Um den vertikalen Größenänderungsbereich zu begrenzen, können Sie die Eigenschaften min-height und max-height verwenden:

textarea {
  resize: vertical;
  min-height: 100px;
  max-height: 300px;
}

Dies stellt sicher, dass der Textbereich nicht zu klein oder zu groß wird.

Nur horizontale Größenänderung

Manchmal möchten Sie möglicherweise eine horizontale Größenänderung zulassen, während die Höhe fixiert bleibt. Dies kann bei Eingaben mit langen Textzeilen hilfreich sein. Um nur horizontale Größenänderung zu aktivieren, verwenden Sie dieses CSS:

textarea {
  resize: horizontal;
}

Diese Regel ermöglicht es, die Breite des Textbereichs zu ändern, während die Höhe gleich bleibt.

Damit diese Größenänderungsoptionen funktionieren, müssen Sie die overflow-Eigenschaft auf etwas anderes als visible setzen. Zum Beispiel:

textarea {
  resize: vertical;
  overflow: auto;
}

Diese Kombination ermöglicht vertikale Größenänderung und fügt Scrollbalken hinzu, wenn der Inhalt größer als die Größe des Textbereichs ist.