Disable textarea Resizing

Normally whenever we use textarea in pages, the browser allows the user to resize it, but at times this is not wanted(as it might screw the other aspects of the design). Here is how we can disable textarea resizing using basic CSS.

Old Method

In the old method, we needed to to specify the value of the CSS property of the

max-height/max-width same as height/width.

textarea { height:300px; width:400px; max-height:300px; max-width:400px; }

Though this method will work out well, but we still see that “resize” icon in corner.

New CSS3 Method

Hence, there is a better way to do this in CSS3. Instead of specifying the

max-height/max-width, we can simply mention resize: none.

textarea { height:300px; width:400px; resize:none; }

It works the same way, and this time without the “resize” icon in corner.

Optional/Conditional Resizing

For enabling only the horizontal resizing, we can replace the none with horizontal.

textarea { height:300px; width:400px; resize:horizontal; }

Similarly for enabling only the vertical resizing, we can replace the none with vertical.

textarea { height:300px; width:400px; resize:vertical; }