Die folgende CSS-Regel deaktiviert das Größenänderungsverhalten für textarea
Elemente:
textarea {
resize: none;
}
Um es für einige (aber nicht alle) Textareas zu deaktivieren, gibt es eine Reihe von Optionen2.
Um einen bestimmten Textbereich
zu deaktivieren, bei dem das Attribut Name
auf foo
gesetzt ist (d.h. <textarea name="foo"></textarea>
):
textarea[name=foo] {
resize: none;
}
Oder mit einem id
-Attribut (z.B. <textarea id="foo"></textarea>
):
#foo {
resize: none;
}
Die W3C-Seite listet mögliche Werte für Größenbeschränkungen auf: none, both, horizontal, vertical und inherit:
textarea {
resize: vertical; /* user can resize vertically, but width is fixed */
}
Schauen Sie sich eine gute Kompatibilitätsseite an, um zu sehen, welche Browser diese Funktion derzeit unterstützen. Wie Jon Hulka bemerkt hat, können die Abmessungen in CSS mit max-width, max-height, min-width und min-height weiter eingeschränkt werden.
Super wichtig zu wissen:
Diese Eigenschaft bewirkt nichts, es sei denn, die Eigenschaft overflow ist etwas anderes als visible, was bei den meisten Elementen der Standard ist. Um sie zu nutzen, müssen Sie also etwas wie overflow: scroll einstellen;
Zitat von Chris Coyier, http://css-tricks.com/almanac/properties/r/resize/
In CSS ...
textarea {
resize: none;
}
CSS 3 verfügt über eine neue Eigenschaft für UI-Elemente, die Ihnen dies ermöglicht. Diese Eigenschaft ist die resize-Eigenschaft. Fügen Sie also Folgendes zu Ihrem Stylesheet hinzu, um die Größenänderung aller Textarea-Elemente zu deaktivieren:
textarea { resize: none; }
Dies ist eine CSS 3-Eigenschaft; verwenden Sie eine Kompatibilitätstabelle, um die Browserkompatibilität zu sehen.
Ich persönlich fände es sehr ärgerlich, wenn die Größenänderung bei Textarea-Elementen deaktiviert wäre. Dies ist eine der Situationen, in denen der Designer versucht, den Client des Benutzers zu "brechen". Wenn Ihr Design keine größeren Textareas zulässt, sollten Sie vielleicht noch einmal überdenken, wie Ihr Design funktioniert. Jeder Benutzer kann textarea { resize: both !important; }
zu seinem Benutzer-Stylesheet hinzufügen, um Ihre Präferenz außer Kraft zu setzen.