{

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

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 an 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 width is fixed.

textarea{
    resize:none;
}
  • using the class attribute (.)

    if textarea is declared with class attribute, you can choose this option

.descriptionStyle{
    resize:none;
}

Where descriptionStyle is declared as an value for class attribute

<textarea id="description" name="description" class="descriptionStyle" rows="4" cols="50">
  • using id selector (#) textarea tag is declared with the id attribute as follows

    
    
     <style>
        textarea{
        resize:none}
     </style>
  </head>
  <body>
     <h1>Text Area disable</h1>
     <textarea id="description" name="description" rows="4" cols="50">

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 latest and legacy browsers with all versions.

draggable html attribute

HTML 5 provides draggable attribute in textarea tag.

draggable allows you to resize or not with boolean value, true is 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 horizontal direction and 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 horizontally textarea in CSS

In this, resize value changes to vertical and 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 attribute 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 latest browsers only.

THE BEST NEWSLETTER ANYWHERE
Join 6,000 subscribers and get a daily digest of full stack tutorials delivered to your inbox directly.No spam ever. Unsubscribe any time.

Similar Posts
Subscribe
You'll get a notification every time a post gets published here.