By user549757


2011-03-08 16:15:40 8 Comments

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

18 comments

@Vijay122 2020-09-28 04:38:49

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" />

@Tejas Savaliya 2020-08-06 06:57:20

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'});

@Donut 2011-03-08 16:17:12

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/

@Šime Vidas 2011-03-08 16:31:34

Is there a solution for Firefox, Opera and/or IE?

@Donut 2011-03-08 16:37:52

@Šime IE and FF3 (and earlier) do not add support resizing, so a solution for them is not needed. For FF4, this solution should work.

@Jon Hulka 2012-11-17 20:23:14

as per davidwalsh.name/textarea-resize - use resize:vertical or resize:horizontal to constrain resizing to one dimension. Or use any of max-width, max-height, min-width and min-height.

@Buksy 2016-08-08 13:15:02

Am I the only one who finds it weird to set this using css and not attributes? Why can't I then set disabled or checked or other properties using CSS ...

@Kroltan 2016-09-08 13:01:45

@Buksy Because "disabled" is a state, not a visual property. Thus it's logical that it shouldn't be decided by a styling language.

@Carlos de Jesus Baez 2020-02-06 13:24:47

This solution haven´t the best practices. You can do it with a MVC property. @Html.TextAreaFor(model => model.YourProperty, new { @style = "width: 90%; height: 180px; resize: none;" })

@user7122338 2018-05-28 07:09:56

You can simply disable the textarea property like this:

textarea {
    resize: none;
}

To disable vertical or horizontal resizing, use

resize: vertical;

or

resize: horizontal;

@Alireza 2017-06-01 13:11:02

You simply use: resize: none; in your CSS.

The resize property specifies whether or not an element is resizable by the user.

Note: The resize property applies to elements whose computed overflow value is something other than "visible".

Also resize not supported in Internet Explorer at the moment.

Here are different properties for resize:

No Resize:

textarea {
  resize: none;
}

Resize both ways (vertically & horizontally):

textarea {
  resize: both;
}

Resize vertically:

textarea {
  resize: vertical;
}

Resize horizontally:

textarea {
  resize: horizontal;
}

Also if you have width and height in your CSS or HTML, it will prevent your textarea be resized, with a broader browsers support.

@Abk 2016-10-25 08:19:12

To disable resize for all textareas:

textarea {
    resize: none;
}

To disable resize for a specific textarea, add an attribute, name, or an id and set it to something. In this case, it is named noresize

HTML

<textarea name='noresize' id='noresize'> </textarea>

CSS

/* Using the attribute name */
textarea[name=noresize] {
    resize: none;
}
/* Or using the id */

#noresize {
    resize: none;
}

@Oriol 2015-10-30 23:26:21

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

@Thusitha Wickramasinghe 2015-07-21 05:18:37

This can be done in HTML easily:

<textarea name="textinput" draggable="false"></textarea>

This works for me. The default value is true for the draggable attribute.

@Antony D'Andrea 2015-09-08 15:11:45

This is an HTML 5 attribute, so only newer browsers will support. I read somewhere IE supports it from 9 onwards.

@Thusitha Wickramasinghe 2015-11-09 11:04:48

This working in most browsers. in every latest browser.

@Mishko Vladimir 2016-12-27 18:14:50

it won't prevent textarea from resizing

@Advait Junnarkar 2020-02-20 01:46:50

@AntonyD'Andrea This isn't working on latest Chrome: jsfiddle.net/ps2v8df9

@yevgeniy 2015-02-12 12:14:27

If you need deep support, you can use an old school technique:

textarea {
    max-width: /* desired fixed width */ px;
    min-width: /* desired fixed width */ px;
    min-height: /* desired fixed height */ px;
    max-height: /* desired fixed height */ px;
}

@MacroMan 2015-07-17 09:55:15

Also use resize:none with this solution to prevent the handle appearing in the bottom corner which frustratingly doesn't work.

@kaelds 2014-02-03 19:07:36

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.

@Raptor 2016-04-05 03:44:34

Don't abuse !important attribute. Meaningless to fix the width & height if CSS attribute resize: none can remove the resize feature

@Peter Mortensen 2019-09-26 09:30:04

Isn't !important evil?

@Advait Junnarkar 2020-02-20 01:56:21

In current Chrome this stop horizontal resizing, but I can still resize textarea vertically.

@EPurpl3 2020-07-08 07:16:19

In some rare cases this could be useful.

@Rami Jamleh 2012-12-27 20:58:33

I found two things:

First

textarea{resize: none}

This is a CSS 3, which is not released yet, compatible with Firefox 4 (and later), Chrome, and Safari.

Another format feature is to overflow: auto to get rid of the right scrollbar, taking into account the dir attribute.

Code and different browsers

Basic HTML

<!DOCTYPE html>
<html>
<head>
</head>
<body>
    <textarea style="overflow:auto;resize:none" rows="13" cols="20"></textarea>
</body>
</html>

Some browsers

  • Internet Explorer 8

Enter image description here

  • Firefox 17.0.1

Enter image description here

  • Chrome

Enter image description here

@James Sumners 2011-03-08 16:35:46

CSS 3 has a new property for UI elements that will allow you to do this. The property is the resize property. So you would add the following to your stylesheet to disable resizing of all textarea elements:

textarea { resize: none; }

This is a CSS 3 property; use a compatibility chart to see browser compatibility.

Personally, I would find it very annoying to have resizing disabled on textarea elements. This is one of those situations where the designer is trying to "break" the user's client. If your design can't accommodate a larger textarea, you might want to reconsider how your design works. Any user can add textarea { resize: both !important; } to their user stylesheet to override your preference.

@Redwolf Programs 2019-04-15 12:35:38

But that would be the user intentionally breaking their layout, rather than a user who just needs to resize his/her texarea and ends up making something not work

@Ambuj Khanna 2019-06-13 05:18:22

I have created a small demo to show how resize properties work. I hope it will help you and others as well.

.resizeable {
  resize: both;
}

.noResizeable {
  resize: none;
}

.resizeable_V {
  resize: vertical;
}

.resizeable_H {
  resize: horizontal;
}
<textarea class="resizeable" rows="5" cols="20" name="resizeable" title="This is Resizable.">
This is Resizable. Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.
</textarea>

<textarea class="noResizeable" rows="5" title="This will not Resizable. " cols="20" name="resizeable">
This will not Resizable. Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.
</textarea>

<textarea class="resizeable_V" title="This is Vertically Resizable." rows="5" cols="20" name="resizeable">
This is Vertically Resizable. Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.
</textarea>

<textarea class="resizeable_H" title="This is Horizontally Resizable." rows="5" cols="20" name="resizeable">
This is Horizontally Resizable. Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.
</textarea>

@Carlos de Jesus Baez 2018-08-30 16:00:16

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;" })

@Baptiste Mille-Mathias 2018-08-30 16:33:43

Hello, thanks for your answer, next time please format the code.

@yogihosting 2018-12-27 15:23:48

This is asp.net MVC based answer. Very nice.

@Webeng 2016-06-12 10:43:26

To disable the resize property, use the following CSS property:

resize: none;
  • You can either apply this as an inline style property like so:

    <textarea style="resize: none;"></textarea>
    
  • or in between <style>...</style> element tags like so:

    textarea {
        resize: none;
    }
    

@Santosh Khalse 2016-12-15 08:08:48

You can try with jQuery also

$('textarea').css("resize", "none");

@Filip Savic 2018-06-25 10:01:40

You should use more jquery. You're not using it enough. :)

@Peter Mortensen 2019-09-26 09:38:09

It is a meme - e.g., "You should totally drop that and try jQuery.".

@Imtiaz Ali Baigal 2013-11-06 09:19:04

<textarea style="resize:none" rows="10" placeholder="Enter Text" ></textarea>

@Jeff Parker 2011-03-08 16:17:54

In CSS ...

textarea {
    resize: none;
}

Related Questions

Sponsored Content

66 Answered Questions

[SOLVED] How do I check whether a checkbox is checked in jQuery?

112 Answered Questions

[SOLVED] How to horizontally center a <div>

31 Answered Questions

[SOLVED] CSS: How do I auto-resize an image to fit a 'div' container?

48 Answered Questions

[SOLVED] How to disable text selection highlighting

23 Answered Questions

[SOLVED] How to change the cursor into a hand when a user hovers over a list item?

  • 2010-06-21 19:45:44
  • user246114
  • 2013381 View
  • 2004 Score
  • 23 Answer
  • Tags:   css

80 Answered Questions

[SOLVED] How do you disable browser Autocomplete on web form field / input tag?

32 Answered Questions

[SOLVED] How to create an HTML button that acts like a link?

  • 2010-05-25 16:39:47
  • Andrew
  • 6526601 View
  • 1992 Score
  • 32 Answer
  • Tags:   html

16 Answered Questions

[SOLVED] Click through div to underlying elements

  • 2010-09-09 20:42:54
  • Ryan
  • 708059 View
  • 1641 Score
  • 16 Answer
  • Tags:   css

32 Answered Questions

[SOLVED] Transitions on the CSS display property

  • 2010-07-25 22:52:49
  • RichardTape
  • 1591179 View
  • 1518 Score
  • 32 Answer
  • Tags:   css css-transitions

Sponsored Content