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 leidet.

Mithilfe von CSS kann man die Optionen einschränken, sodass sich die Größe eines Textfeldes entweder gar nicht mehr ändern läßt. Es lässt sich zum Beispiel festlegen, dass sich die Größe des Textfeldes sich 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 dnen 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 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,  aber die Höhe liesse sich nicht ändern. 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.