Skip to content
Fix Code Error

How do I disable the resizable property of a textarea?

March 13, 2021 by Code Error
Posted By: Anonymous

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?

Enter image description here

Solution

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/

Answered By: Anonymous

Related Articles

  • Best way to extract messy HTML tables using BeautifulSoup
  • Polymer 1.0 Trying to make a splitter which works like…
  • How to blur the background after click on the button in…
  • insert tables in dataframe with years from 2000 to 20018…
  • How to show title in hover - css / jquery
  • Ember link-to throws error / does not clear screen as…
  • vuetify list-item-group how to unselect the selected record
  • Recommended way of making React component/div draggable
  • Is it possible to apply CSS to half of a character?
  • Reset/remove CSS styles for element only

Disclaimer: This content is shared under creative common license cc-by-sa 3.0. It is generated from StackExchange Website Network.

Post navigation

Previous Post:

How do I get time of a Python program’s execution?

Next Post:

Trigger a button click with JavaScript on the Enter key in a text box

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

  • Get code errors & solutions at akashmittal.com
© 2022 Fix Code Error