HTML : Disable resizing of textarea

What is textarea?

The <textarea> element is often used in a form, to collect user inputs like comments or reviews.

A text area can hold an unlimited number of characters.

How to resize texarea?

You can resize a textarea by clicking on the bottom right corner of the textarea and dragging the mouse.

How to disable resizing textarea?

The following CSS rule disables resizing behavior for textarea elements:

textarea {
  resize: none;
}

With above code all of your textareas will be disabled to resize.

You can use class attribute in your tag -

<textarea class="textarea1" rows="4" cols="50">
 Enter your message here...
</textarea>

.textarea1 {
  resize: none;
}

To disable a specific textarea with the name attribute set to foo

<textarea name="foo" rows="4" cols="50">
 Enter your message here...
</textarea>

textarea[name=foo] {
  resize: none;
}

Or, using an id attribute -

<textarea id="foo" rows="4" cols="50">
 Enter your message here...
</textarea>

#foo {
  resize: none;
}

This property does nothing unless the overflow property is something other than visible, which is the default for most elements. So generally to use this, you'll have to set something like overflow: scroll;

Demo

resize has below values that you can use with your text areas -
none: the element is not resizeable.
both: the user can resize the element’s height and/or width.
horizontal: the user can resize the element horizontally (increasing the width).
vertical: the user can resize the element vertically (increasing the height).
inherit: the element inherits the resize value of its parent.

Below is the demo where you can click on the value names and can see the demo of selected value version of textarea -

With all that being said, I highly recommend you keep learning!

Thank you for reading this article. Please feel free to connect with me on LinkedIn and Twitter.