How to resize disable in textarea in CSS| draggable in HTML

It is a CSS short tutorial on How to resize textarea in HTML and CSS.

You will learn the following things as part of this post.

How to disable resize Textarea with CSS/HTML
How to disable resize horizontally textarea
Disable Resize vertically for textarea

TextArea is an Input element and sizer. sizer allows support of multiline text and is resizable in the horizontal and vertical directions.

Text area can be created with rows and cols. .

<textarea id="description" name="description" rows="4" cols="50"> </textarea>

By default text area is resizable by either clicking the bottom right corner or dragging a mouse. textarea-resize.png

How to disable textarea resizable?

There are multiple ways we can achieve this with

Using resize attribute in CSS
max and min-width height in CSS
HTML draggable attribute in HTML

resize attribute

Sometimes, You want a fixed textarea that is not non-resizable. How do you disable resize? You can use resize:none attribute in CSS for the textarea element resize🔗 is an attribute to make it resizable or not for a given HTML element. possible values for resize attribute are

none: disable resizable both: Can be resized horizontally and vertically horizontal: resized in horizontal direction and height is fixed. vertical: resized in the vertical direction only and the width is fixed.

textarea {
  resize: none;
}

using the class attribute (.)
if textarea is declared with a class attribute, you can choose this option

.descriptionStyle {
  resize: none;
}

Where descriptionStyle is declared as a value for the class attribute

<textarea id="description" name="description" class="descriptionStyle" rows="4" cols="50">

using id selector (#) The textarea tag is declared with the id attribute as follows

<textarea id="description" name="description" rows="4" cols="50">

# description {
  resize: none;
}

Where description is a value for the id attribute

using the name attribute selector In this, the element is declared with the name attribute

<textarea id="description" name="description" rows="4" cols="50">

textarea[name="description"] {
  resize: none;
}

Here is a complete example

<!doctype html>
<html lang="en">
   <!DOCTYPE html>
   <html>
      <head>
        <script></script>
        <style>textarea{resize:none;}
        </style>
      </head>
      <body>
         <h1>Text Area disable</h1>
         <textarea id="description" name="description" rows="4" cols="50">
  </textarea>
   </html>

The only disadvantage of this approach is It does support all browsers except `Internet explorer.

All browsers support using max and min-width

It is a CSS change to apply width and height to a fixed pixel to the following properties.

max-height
min-height
max-width
min-width

textarea {
  max-width: 200px;
  min-width: 200px;
  min-height: 200px;
  max-height: 200px;
}

Sizer on textarea is disabled.

It supports all the latest and legacy browsers with all versions.

draggable HTML attribute

HTML 5 provides a draggable attribute in the textarea tag.

draggable allows you to resize or not with a boolean value, and true is the default value.

<textarea
  id="description"
  name="description"
  draggable="false"
  rows="4"
  cols="50"
></textarea>

Sizer on textarea is removed in this case.

draggable is HTML 5 feature, hence, It supports only the latest browsers chrome, safari, firefox, etc.

How to resize disabled vertically Textarea in CSS

as resize in CSS provides to make text resizable in a horizontal direction and the height of the element is fixed. Vertical resize is disabled with this.

textarea {
  resize: horizontal;
}

Sizer on Textarea allows only horizontal direction resizable.

How to resize disable horizontal Textarea in CSS

In this, resize value changes to vertical and the width is fixed horizontal resize is disabled.

textarea {
  resize: vertical;
}

Sizer on Textarea allows only vertical direction resizable.

Conclusion

To Summarize, We have learned how to disable resize in the text area in multiple ways.

First, using resize attributes in CSS has not had support in IE except for all browsers. Second, using maximum and minimum width and height has to support all browsers. Finally, using draggable in HTML attribute which has support the latest browsers only.

How to resize disable in textarea in CSS| draggable in HTML

#How to disable textarea resizable?

#resize attribute

#All browsers support using max and min-width

#draggable HTML attribute

#How to resize disabled vertically Textarea in CSS

#How to resize disable horizontal Textarea in CSS

#Conclusion