Textarea not resizable

In this article, we will see how to disable/ not the resizable textarea box in HTML.

If you create a <textarea> tag, the box will automatically be created. By default the “resize” property of textarea tag is set to be “auto” in HTML5. So the text area box can be resized both vertically and horizontally. Using your mouse cursor you can resize the textarea box size.

To make resize horizontally, we need to give the “horizontal” value to the “resize” property for textarea. To make resize vertically, we need to give the “vertical” value to the “resize” property for textarea. If you want to disable the resize, you need to set the “resize” property to the “none” value for textarea. You can set it via the CSS inline “style” attribute or inside the <style> tag. See, the below output and code.

See the Pen
Textarea not resize by Wonderdevelop (@wonderdevelop)
on CodePen.

Steps to disable textarea resizable

Here’s an example to disable resize:

<html>
<head>
   <title>Textarea not resize</title>
</head>
<body>
   <textarea style="resize: none;"> Some text... </textarea>
</body>
</html>

In this example, we write basic HTML structures like <html>, <head> and <body> and set the title using <title> tag.
Then create <textarea> tag. And using the “style” attribute of textarea, we set the “resize” property to “none”. The default width and height will be set to the textarea box.

I hope you have understood the concept of textarea resize property. If you have any doubts about this then please comment below.