How to Disable Resizable Property of Textarea

Last updated on December 12th, 2024 at 05:13 am

Textarea is a useful HTML form element that allows users enter multi line text as well as paragraphs. They are commonly used in many websites and applications. You can easily resize textarea to accommodate really long texts. However, sometimes web developers want to disable resizable property of textarea. In this article, we will learn how to do this.

How to Disable Resizable Property of Textarea

There are several ways to disable resizable property of textarea. We will look at each of them one by one. Please note, in all the following cases, the overflow CSS property of textarea must NOT be visible. It can have an other value such as scroll, etc.

Let us say you have the following textarea.

<textarea id='my_textarea' class='textarea_class' name='textarea_name'/>

A textarea can be resized horizontally, vertically or both ways by default. So you can disable its horizontal resizing, vertical resizing or resizing along both directions. Here are the different ways to do this.

1. Disable Resizing Fully

The CSS property that allows you to resize a textarea is called resize. It can have values none,vertical, horizontal, both or inherit. Depending on its value, it can be resized. If you want to disable both horizontal as well as vertical resizing, then set it to none.

#my_textarea{
  resize:none;
}

The above CSS style will disable all resizing for textarea with id=my_textarea on your web pages.

2. Disable Vertical Resizing

Similarly, if you set resize property to horizontal then only horizontal resizing will be allowed and vertical resizing will not be allowed.

textarea{
  resize:horizontal;
}

This CSS style will disable vertical resizing for textarea with id=my_textarea on your web page.

3. Disable Horizontal Resizing

On the other hand, if you set it to vertical, then horizontal resizing will not be allowed.

textarea{
  resize:vertical;
}

This CSS style will disable horizontal resizing for textarea with id=my_textarea on your web page.

4. Disable Resizing for Multiple TextAreas

So far we have learnt different ways to disable resizable property of a single text area. However, you can always apply them to multiple textareas on your web page as well. You can do this by simply changing the CSS selector. Here is an example to disable resizing on all textareas on your web page.

textarea{
  resize:none;
}

Here is an example to disable only those textareas on your web page where the class=textarea_class.

.textarea_class{
  resize:none;
}

If your textarea has name attribute as well, then you can use that attribute to select the textarea to apply this styling.

textarea[name='textarea_name']{
  resize:none;
}

Conclusion

In this article, we have learnt several different ways to disable resizing of textarea using CSS. You can use any of them to disable resizing as per your requirement. We have learnt how to disable horizontal, vertical as well as both resizing. We have also learnt how to disable resizing for one textarea as well as multiple textarea. But please remember, in all cases, the overflow property of the textarea should not be visible.

Also read:

How to Change Element’s Class With JavaScript
How to Set Cellpadding and Cellspacing in CSS
How to Horizontally Center Div in CSS