Back

Explore Courses Blog Tutorials Interview Questions
0 votes
2 views
in Web Technology by (20.3k points)

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?

1 Answer

0 votes
by (40.7k points)

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/

Related questions

Browse Categories

...