In den meisten Browsern lassen sich Texteingabefelder ‚textarea‘ (in HTML-Formularen) nach belieben vergrößern oder verkleinern. Das kann praktisch sein, wenn man zum Beispiel einen langen Text eingibt. In den meisten Fällen bietet diese Option aber ein bisschen zu viel Freiraum und man läuft Gefahr, dass das Layout der Webseite darunter leidet.

Mit Hilfe von CSS kann man die Optionen einschränken, so dass sich die Größe eines Textfeldes entweder gar nicht mehr, oder nur beschränkt ändern läßt. Es lässt sich zum Beispiel festlegen, dass sich die Größe des Textfeldes ausschliesslich in horizontaler oder vertikaleler Richtung ändern lässt. Zusätzlich kann man auch Minimal- oder Maximalgrößen angeben und so Spielräume vorgeben, in denen sich ein Textfeld ändern lässt.

Hier einige zur Verfügung stehende Einstellungsmöglichkeiten:

Resize-Option komplett ausschalten

textarea { resize: none; }

Mit resize: none; ist die Größe des Textfeldes für den Nutzer nicht mehr änderbar.

Nur vertikale Größenänderung zulassen

textarea { resize: vertical; }

Mit resize: vertical; lässt sich festlegen, dass das Textfeld nur noch in vertikaler Richtung vergrößert und verkleinert werden kann. Diese Einschränkung ist vermutlich die, die in den meisten Fällen Sinn macht. So lässt sich zum Beispiel ein Kontaktformular oder auch ein Kommentarfeld in der Höhe ändern – die Breite bleibt aber immer gleich. Das Layout wird so in den meisten Fällen nicht beeinträchtigt.

Nur horizontale Größenänderung zulassen

textarea { resize: horizontal; } 

Die Einschränkung resize: horizontal;  macht vermutlich nur sehr selten Sinn. So lässt sich ein Textfeld vom Nutzer breiter oder schmaler ziehen, die Höhe kann aber nicht geändert werden. Die Einschränkung ist aber natürlich trotzdem genauso gültig, wie alle anderen auch.

Vertikale Änderung unterbinden, horizontale Änderung einschränken

textarea { resize:horizontal; max-width:480px; min-width:240px; }

Eine elegenate Variante – vermulich aber wenig sinnvoll: die Breite lässt sich zwar ändern, aber nur in einem Vorgegebenen Ramen – es lassen sich eine minimale und eine maximale Breite vorgeben.

Horizontale Änderung unterbinden, vertikale Änderung einschränken

textarea { resize:vertical; max-height:480px; min-height:240px; )

DIe letzte Variante ist mein persönlicher Favorit: die Höhe lässt sich zwar ändern, aber nur in einem vorgegebenen Ramen. Es lassen sich eine minimale und eine maximale Höhe vorgeben. Die Breite des Eingabefeldes lässt sich nicht ändern. So könnte ein Nutzer das Eingabefeld bei Bedarf ein bisschen größer aufzieen, aber nicht in der Breite verändern.