web #css

Disable the Resizable Property of Textarea

Jan 4 '19 · 1 min read · 313

Want to disable the resizable property of a textarea? - the draggy thing at the bottom right corner.

Solution

T

here have many times when I have wanted to make the size of a text area element fixed and non-resizable, but I always forget the (extremely simple) solution. This post is an attempt to commit this to memory - although it is only an easy Google away.

"I don’t need to know everything; I just need to know where to find it, when I need it."
- Albert Einstein

The following CSS will disable the draggable re-sizing behaviour for textarea elements in all directions.

textarea {
  resize: none;
}

To disable resizing for specific textarea elements, you can set the class and id attributes, or another or custom attribute (e.g. name ).

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

#foo {
  resize: none;
}

There are 5 possible values for the resize property: none, both, horizontal, vertical and inherit. For example, resize: vertical will allow the user to resize vertically, but not horizontally (fixed width).

textarea {
  resize: vertical;
}

A Small Caveat

This property does nothing unless the overflow property is something other than visible, which is the default for most elements. Make sure you have something like overflow: scroll; set, if not by default.