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; }