How to disable the resizing of HTML textarea
John Mwaniki / Updated on 07 Jul 2024The HTML <textarea> is a multi-line form input field that is essential for allowing users to input large amounts of text.
You can define its size using the rows attribute which specifies its height (the visible number of lines) and the cols attribute which specifies its width.
<textarea name="message" rows="8" cols="60"></textarea>
You can also define the size of the text area using the CSS width and height properties.
<textarea name="message" style="width:650px; height:100px;"></textarea>
However, the textareas can by default be resized by the user. By clicking on the bottom right corner of the textarea and dragging the mouse, you can resize its width and height.
While it is not recommended, you may for some reason (eg if resizing breaks the page layout) want to disable the default resize behavior to have non-resizeable textareas.
In this article, you will learn how to disable the resizing of HTML textarea using CSS.
Disabling Textarea Resizing with CSS
The CSS resize property allows you to control whether a textarea can be resized or not.
To disable resizing of the textarea element, set its resize property value to "none".
textarea {
resize: none;
}
You can alternatively use the ID or class name of the specific textarea if you do not intend to disable resizing on all textareas.
<textarea id="message" style="width:650px; height:100px;"></textarea>
<style>
#message {
resize: none;
}
</style>
The resize property allows the values "none", "both", "horizontal", "vertical", "initial", and "inherit".
Its default value is "both", which means that the textarea can be resized both horizontally and vertically.
CSS Resize Property Values
Below is a table describing each of the possible resize property values.
| Value | Description |
|---|---|
| both | This is the default value. It enables the user to resize both the height and width of the textarea. |
| none | Disables the user's ability to resize the textarea. |
| horizontal | This allows the user to resize only the width of the textarea and not its height. |
| vertical | This allows the user to resize only the height of the textarea and not its width. |
| initial | This sets the property to its default value. |
| inherit | This sets the property to inherit its value from its parent element. |
More examples
Disabling only the horizontal/width resizing of the textarea element.
textarea {
resize: vertical;
}
Disabling only the vertical/height resizing of the textearea.
textarea {
resize: horizontal;
}