In most browsers, text text input field ‘textarea’ (in HTML forms) can be enlarged or reduced in size as required. This can be practical if you are entering a long text, for example. In most cases, however, this option offers a little too much freedom and you run the risk that the layout of the website suffers as a result.

With the help of CSS, you can restrict the options so that the size of a text field can either no longer be changed at all or only to a limited extent. For example, you can specify that the size of the text field can only be changed horizontally or vertically. In addition, you can also specify minimum or maximum sizes and thus specify the range within which a text field can be changed.

Here are some of the available setting options:

Switch off the resize option completely

textarea { resize: none; }

With resize: none; the size of the text field can no longer be changed by the user.

Only allow vertical resizing

textarea { resize: vertical; }

With resize: vertical; you can specify that the text field can only be enlarged and reduced in a vertical direction. This restriction is probably the one that makes sense in most cases. For example, the height of a contact form or a comment field can be changed vertically – but the width always remains the same. The layout is not affected in most cases.

Only allow horizontal resizing

textarea { resize: horizontal; } 

The restriction resize: horizontal; probably only makes sense very rarely. This allows the user to make a text field wider or narrower, but the height cannot be changed. However, the restriction is of course just as valid as all the others.

Prevent vertical change, restrict horizontal change

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

An elegant variant – but probably not very useful: the width can be changed, but only within a predefined range – a minimum and a maximum width can be specified.

Prevent horizontal change, restrict vertical change

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

The last variant is my personal favorite: the height can be changed, but only within a predefined range. A minimum and a maximum height can be specified. The width of the input field cannot be changed. This means that a user could make the input field a little larger if required, but not change the width.