How do I disable the resizable property of a 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

Answer 1

Inline Style:

<textarea class="myTextArea" style="resize:none" rows="12" placeholder="Write Something" ></textarea>

In Cascading Style Sheet:

textarea {
  resize: none;
}

In Javascript:

document.querySelector('.myTextArea').style.resize = 'none';

In jQuery:

$('.myTextArea').css({'resize': 'none'});

Answer 2

Adding !important makes it work:

width:325px !important; height:120px !important; outline:none !important;

outline is just to avoid the blue outline on certain browsers.

Answer 3

CSS 3 can solve this problem. Unfortunately it's only supported on 60% of used browsers nowadays.

For Internet Explorer and iOS you can't turn off resizing, but you can limit the textarea dimension by setting its width and height.

/* One can also turn on/off specific axis. Defaults to both on. */
textarea { resize:vertical; } /* none|horizontal|vertical|both */

See Demo

Answer 4

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 couple of options.

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

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

Or, using an id attribute (i.e., <textarea id="foo"></textarea>):

#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 */
}

Review a decent compatibility page to see what browsers currently support this feature. As Jon Hulka has commented, the dimensions can be further restrained in CSS using max-width, max-height, min-width, and min-height.

Super important to know:

This property does nothing unless the overflow property is something other than visible, which is the default for most elements. So generally to use this, you'll have to set something like overflow: scroll;

Quote by Sara Cope, http://css-tricks.com/almanac/properties/r/resize/

Answer 5

In reactjs, you can disable the resize widget using style props.

<textarea id={"multiline-id"} ref={'my-ref'} style={{resize: "none"}} className="text-area-additional-styles" />

Answer 6

With @style, you can give it a custom size and disable the resize feature (resize: none;).

@Html.TextAreaFor(model => model.YourProperty, new { @style = "width: 90%; height: 180px; resize: none;" })