Disable resizable property of textarea

Want to disable resizable property of textarea? Here is some tips to prevent the click on the bottom right corner of the textarea.

To disable resizable property of textarea, there are a few options.

<textarea name="txtName" id="txtID"></textarea>

CSS can solve this problem and unfortunately it’s only supported on 60% of used browsers nowadays. Basically, you can use below CSS rule to disable resizing behavior.

Let’s see some example to disable resizable property of textarea.

textarea {
resize: none;
}

Or, you can use name or id attribute wise:

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

#txtID {
resize: none;
}

Read Also: jQuery data attributes

Sometimes, you can resize by restrictions i.e. none, both, horizontal, vertical, and inherit. For below code, user can resize vertically, but the width is fixed.

textarea {
resize: vertical;
}

Unless overflow property is something other than visible, this property does nothing i.e. default for most elements. So, to use this, you will have to set something like overflow: scroll;