How to Disable the Resize Grabber of <Textarea>

How do I disable the resizable property of a textarea?

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/

How to disable the resize grabber of textarea ?

Just use resize: none

textarea {
   resize: none;
}

You can also decide to resize your textareas only horizontal or vertical, this way:

textarea { resize: vertical; }

textarea { resize: horizontal; }

Finally,
resize: both enables the resize grabber.

How to disable textarea resizing?

You can use css

disable all

textarea { resize: none; }

only vertical resize

textarea { resize: vertical; }

only horizontal resize

textarea { resize: horizontal; } 

disable vertical and horizontal with limit

textarea { resize: horizontal; max-width: 400px; min-width: 200px; }

disable horizontal and vertical with limit

textarea { resize: vertical; max-height: 300px; min-height: 200px; }

I think min-height should be useful for you

Trying to remove resizable from textarea

You need to use resize property to prevent the textarea to be resized.

Demo

textarea {
   resize: none;
}

---

resize property also takes values like vertical and horizontal to resize the textarea horizontally only, or vertically only.

For Vertical only

textarea { 
   resize:vertical; 
}

For Horizontal only

textarea { 
   resize:horizontal; 
} 

How can I prevent a textarea resize handle from showing through higher z-index div?

This should disable the resize handle entirely - but using clip() you could hide the scrollbar

<style>
 textarea{ 
   position: absolute;
   left:10px;
   top:10px;
   z-index:-1;
   resize:none;
   width:200px;
   height:50px;
   clip:rect(0,189px, 50px, 0);
 }
</style>

How to disable textarea matInput resizing?

How about adding style="resize: none;" on html code?

<p>
  <mat-form-field style="border: 1px solid black">
    <textarea style="resize: none;" matInput>can NOT resize</textarea>
  </mat-form-field>
</p>

<p>
  <mat-form-field style="border: 1px solid black">
    <textarea matInput>can resize</textarea>
  </mat-form-field>
</p>

---

Related Topics