How to Disable the Resizable Property of a 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 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

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.

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 to remove resize in text area tag

According to your screenshot you market the right bottom part which is use to resize the textarea if you want to stop resizing use this css

textarea{     margin: 0px ;     -webkit-box-shadow: none ;       box-shadow: none  ;       border-color: transparent ;      height: 38px ;      border: 1px solid #000 ;      resize: none ;}

<textarea  id="txtarqlmchat"></textarea>

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

textarea {
    resize: none;
}

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

#foo {
    resize: none;
}

.my-disabled{    background-color: #cccccc;    color: #888888;}

<textarea class="my-disabled" name=area1 readonly>Text goes here</textarea>