DEV Community

loading...
Cover image for HTML : Disable resizing of textarea

HTML : Disable resizing of textarea

RajeshKumarYadav.com
I am Rajesh, a Technology Specialist by profession and a Technical Blogger by passion. I am passionate about knowledge sharing, open-source contributions, connecting to people, and mentoring.
Updated on ・2 min read

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.

Alt Text

How to disable resizing textarea?

The following CSS rule disables resizing behavior for textarea elements:

textarea {
  resize: none;
}
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode
.textarea1 {
  resize: none;
}
Enter fullscreen mode Exit fullscreen mode

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

<textarea name="foo" rows="4" cols="50">
 Enter your message here...
</textarea>
Enter fullscreen mode Exit fullscreen mode
textarea[name=foo] {
  resize: none;
}
Enter fullscreen mode Exit fullscreen mode

Or, using an id attribute -

<textarea id="foo" rows="4" cols="50">
 Enter your message here...
</textarea>
Enter fullscreen mode Exit fullscreen mode
#foo {
  resize: none;
}
Enter fullscreen mode Exit fullscreen mode

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 -

Buy Me A Coffee

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.

Discussion (0)