How to Disable Resizeable Property of Textarea

Normally whenever we use textarea in pages, the browser allows the user to resize it, but sometimes this is not required (as it affect the other part of the design).

So, In this article I will explain how to disable or prevent users from resizing the textarea element in browsers like Google Chrome, Mozilla Firefox and Apple Safari.

Note: By default, <textarea> elements are resizeable as shown below-.

----: Old Method :-----

In the old method, we need to set the value of the CSS property shown as below-

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

we set max-height/max-width same as height/width.
Example-

This method works well, but we still see "resize" icon in corner.

-----: New CSS3 Method :-----

We can use the CSS3 resize property to remove or disable the default horizontal and vertical resizeable property of the HTML <textarea> element. 

This property will also hide the resizing handle at the bottom-right corner of the textarea.

textarea {  
    resize:none;
}

Example-

Note: The resize property applies to elements whose overflow property value is something other than "visible".

-----: Optional / Conditional Resizing :-----

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

textarea {  
    resize:horizontal;
}

Example-

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

textarea {  
    resize:vertical;
}

Example-