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 textarea and dragging the mouse. How can I disable this?

@JDIsaaks - further, allowing resize in certain situations can break layout and printabilit (an important aspect of a current mission-critical project). — random_user_name, Nov 23 '12 at 19:35
Sometimes you really do want a non-resizeable textarea. For instance, in this case, when you're (conditionally) converting a textarea into something that just looks like a label. It looks really odd to have a label with a random floating grabber way off to the side. — neminem, Jan 21 '15 at 17:20
For the love of all that is good, please don't do this on an actual textarea or you will alienate your power users. Breaking core browser functionality should be considered a nuclear option. — superluminary, Jan 30 '20 at 13:37

score 4279 · Accepted Answer · edited May 22 '21 at 05:07

4279

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.

You can use class attribute in your tag(<textarea class="textarea1">):

.textarea1 {
  resize: none;
}

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/

edited May 22 '21 at 05:07

JSman225

96
1
16

answered Mar 08 '11 at 16:17

Donut

110,061
20
134
146

1

Is there a solution for Firefox, Opera and/or IE? – Šime Vidas Mar 08 '11 at 16:31
8

@Š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. – Donut Mar 08 '11 at 16:37
33

as per http://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. – Jon Hulka Nov 17 '12 at 20:23
6

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 ... – Buksy Aug 08 '16 at 13:15
9

@Buksy Because "disabled" is a state, not a visual property. Thus it's logical that it shouldn't be decided by a *styling* language. – This company is turning evil. Sep 08 '16 at 13:01
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;" }) – Carlos de Jesus Baez Feb 06 '20 at 13:24
I initially attempted the above technique, but it did not work for me, so I then used textarea { resize: none; pointer-events: none; } That`s working perfectly fine on https://www.fireboxtools.com/tools/word-counter – jitendra rajput Jun 12 '23 at 10:07

score 248 · Answer 2 · answered Mar 08 '11 at 16:17

248

In CSS ...

textarea {
    resize: none;
}

answered Mar 08 '11 at 16:17

Jeff Parker

7,367
1
22
25

score 132 · Answer 3 · edited Jun 20 '20 at 09:12

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

score 74 · Answer 4 · edited Sep 26 '19 at 09:24

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.

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 — Radvylf Programs, Apr 15 '19 at 12:35

score 34 · Answer 5 · answered Nov 06 '13 at 09:19

34

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

answered Nov 06 '13 at 09:19

Imtiaz Ali Baigal

361
3
2

score 27 · Answer 6 · edited Sep 26 '19 at 09:31

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

edited Sep 26 '19 at 09:31

Peter Mortensen

30,738
21
105
131

answered Feb 12 '15 at 12:14

yevgeniy

748
9
15

8

Also use `resize:none` with this solution to prevent the handle appearing in the bottom corner which frustratingly doesn't work. – MacroMan Jul 17 '15 at 09:55

score 23 · Answer 7 · edited Sep 26 '19 at 09:32

23

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.

edited Sep 26 '19 at 09:32

Peter Mortensen

30,738
21
105
131

answered Jul 21 '15 at 05:18

Thusitha Wickramasinghe

1,063
2
15
30

This is an HTML 5 attribute, so only newer browsers will support. I read somewhere IE supports it from 9 onwards. – Antony D'Andrea Sep 08 '15 at 15:11
5

This working in most browsers. in every latest browser. – Thusitha Wickramasinghe Nov 09 '15 at 11:04
1

it won't prevent textarea from resizing – Volodymyr Myshko Dec 27 '16 at 18:14
4

@AntonyD'Andrea This isn't working on latest Chrome: https://jsfiddle.net/ps2v8df9/ – Advait Junnarkar Feb 20 '20 at 01:46

score 15 · Answer 8 · edited Mar 30 '22 at 12:43

15

Use this property resize: none;

textarea {
  resize: none;
}

edited Mar 30 '22 at 12:43

Ismoil Shokirov

2,213
2
16
32

answered Aug 16 '21 at 07:22

Priya Maheshwari

477
5
8

score 14 · Answer 9 · edited Sep 26 '19 at 09:39

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.

score 11 · Answer 10 · edited Sep 26 '19 at 09:40

11

You can simply disable the textarea property like this:

textarea {
    resize: none;
}

To disable vertical or horizontal resizing, use

resize: vertical;

or

resize: horizontal;

edited Sep 26 '19 at 09:40

Peter Mortensen

30,738
21
105
131

answered May 28 '18 at 07:09

score 11 · Answer 11 · edited Aug 06 '22 at 18:37

11

you need to set the below CSS code in your component.css

textarea {
    resize: none;
}

edited Aug 06 '22 at 18:37

Geeky Quentin

2,469
2
7
28

answered Aug 06 '22 at 06:51

Umer Baba

285
3
4

score 10 · Answer 12 · edited May 10 '18 at 13:19

10

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;
}
```

edited May 10 '18 at 13:19

Quentin

914,110
126
1,211
1,335

answered Jun 12 '16 at 10:43

Webeng

7,050
4
31
59

Ismoil Shokirov · Answer 13 · 2022-01-02T16:56:52.090

8

textarea {
  resize: none;
}

The code above will disable the resizable property of all <textarea/> elements in your project. If you want that that is fine, otherwise you would want to use a specific class for your textarea elements.

.not-resizable {
   resize: none;
}

In your HTML

<textarea class="not-resizable"></textarea>

edited Jan 02 '22 at 16:56

answered Jul 21 '21 at 09:38

Ismoil Shokirov

2,213
2
16
32

score 8 · Answer 14 · answered Feb 10 '23 at 04:49

8

You can disable resizeable property of textarea using textarea {resize: none;}

textarea {
   resize: none;
}

Demo

answered Feb 10 '23 at 04:49

Kabeer

117
1
4

score 7 · Answer 15 · edited Sep 26 '19 at 09:33

7

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

edited Sep 26 '19 at 09:33

Peter Mortensen

30,738
21
105
131

answered Oct 30 '15 at 23:26

Oriol

11,660
5
35
37

score 7 · Answer 16 · edited Sep 26 '19 at 09:35

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

score 6 · Answer 17 · answered Jun 13 '19 at 05:18

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>

score 4 · Answer 18 · edited Aug 30 '18 at 19:21

4

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

edited Aug 30 '18 at 19:21

Baptiste Mille-Mathias

2,144
4
31
37

answered Aug 30 '18 at 16:00

Carlos de Jesus Baez

365
3
6

2

Hello, thanks for your answer, next time please format the code. – Baptiste Mille-Mathias Aug 30 '18 at 16:33
This is asp.net MVC based answer. Very nice. – yogihosting Dec 27 '18 at 15:23

Santosh Khalse · Answer 19 · 2016-12-15T08:15:16.910

1

You can try with jQuery also

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

edited Dec 15 '16 at 08:15

answered Dec 15 '16 at 08:08

Santosh Khalse

12,002
3
36
36

3

You should [use more jquery](https://www.doxdesk.com/img/updates/20091116-so-large.gif). You're not using it enough. :) – Filip Savic Jun 25 '18 at 10:01
1

[It is a meme](https://meta.stackexchange.com/questions/19478/the-many-memes-of-meta/19492#19492) - e.g., *"You should totally drop that and try jQuery."*. – Peter Mortensen Sep 26 '19 at 09:38

score 0 · Answer 20 · edited Sep 26 '19 at 09:29

0

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.

edited Sep 26 '19 at 09:29

Peter Mortensen

30,738
21
105
131

answered Feb 03 '14 at 19:07

kaelds

317
2
3

6

Don't abuse `!important` attribute. Meaningless to fix the width & height if CSS attribute `resize: none` can remove the resize feature – Raptor Apr 05 '16 at 03:44
1

Isn't `!important` evil? – Peter Mortensen Sep 26 '19 at 09:30
In current Chrome this stop horizontal resizing, but I can still resize textarea vertically. – Advait Junnarkar Feb 20 '20 at 01:56
In some rare cases this could be useful. – EPurpl3 Jul 08 '20 at 07:16

score 0 · Answer 21 · answered Jun 02 '23 at 06:43

If anyone is looking for a way to this in plain Javascript:

textArea = document.createElement("textarea");
textArea_input.setAttribute("style","resize:none");

Note: Setting the style property this way will overwrite all your prior css style declarations.

score -1 · Answer 22 · answered Aug 29 '23 at 11:23

Yes, you can disable the resizable property of a textarea using CSS. The following code will disable the resizable property of a textarea with the id my-textarea:

CSS Code:-

textarea#my-textarea {
  resize: none;
}

You can also disable the resizable property of all textareas on a page by adding the following code to your CSS stylesheet:

CSS Code:-

textarea {
  resize: none;
}

The resize property can have three values:

none: The textarea cannot be resized.
horizontal: The text area can only be resized horizontally.
vertical: The text area can only be resized vertically.

The default value of the resize property is none.

In addition to using CSS, you can also disable the resizable property of a textarea using JavaScript. The following code will disable the resizable property of a textarea with the id my-textarea:

JavaScript Code:-

const textarea = document.getElementById('my-textarea');
textarea.style.resize = 'none';

This code will overwrite any CSS styles that have been applied to the textarea.

To reduce the size of a textarea, you can use the rows and cols attributes in the HTML code. The rows attribute specifies the number of rows in the textarea, and the cols attribute specifies the number of columns. For example, the following code will create a textarea with 10 rows and 50 columns:

HTML Code:-

<textarea rows="10" cols="50"></textarea>

You can also use CSS to set the size of a textarea. The following code will set the height and width of a textarea with the id my-textarea to 100px and 200px, respectively:

CSS Code:-

textarea#my-textarea {
  height: 100px;
  width: 200px;
}

How do I disable the resizable property of a textarea?

22 Answers22

Super important to know:

Code and different browsers

HTML

CSS

Linked

Related