How to disable resizable property of textarea?

Question

I want to disable the resizable property of a textarea.

Currently, I can resize a textarea by clicking on the bottom right corner of the textarea and dragging the mouse. How can I disable this?

Answer 1

The following CSS rule disables resizing behavior for textarea elements:

textarea {

  resize: none;

}

To disable it for some (but not all) textareas, there are a few options:https://www.electrictoolbox.com/disable-textarea-resizing-safari-chrome/

• To disable the specific textarea with the name attribute set to foo (i.e., <textarea name="foo"></textarea>) use the below code:

textarea[name=foo] {

  resize: none;

}

• Otherwise, you can try using an id attribute (i.e., <textarea id="foo"></textarea>) like this:

#foo {

  resize: none;

}

• The W3C page  lists possible values for resizing restrictions: none, both, horizontal, vertical, and inherit:

textarea {

  resize: vertical; /* user can resize vertically, but width is fixed */

}

Note:

This property does nothing unless the overflow property is something other than visible, which is the default for most elements. So to use this you must set something like overflow: scroll; Refer to this likk: http://css-tricks.com/almanac/properties/r/resize/