PUBLISHED ON: AUGUST 9, 2021
How do I disable the resizable property of a textarea?
CSS provides a mechanism for controlling the resizability of an element. The resize property specifies whether the element is resizable or not.
The HTML <textarea> uses the resize property to set the height and width of the text area.
Disable the resizable property of a textarea
To disable the resize property of the text area use resize:none within the CSS stylesheet. Here is an example to remove resizable property from textarea.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>HTML</title>
<style>
textarea {
resize: none;
}
</style>
</head>
<body>
<textarea rows="10" cols="40"> Disable Textarea resizing</textarea>
</body>
</html>
Output
Here is the output of the above program.
Now let's add some long content and see how it affects the textarea.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>HTML</title>
<style>
textarea {
resize: none;
}
</style>
</head>
<body>
<textarea rows="10" cols="40">Disable Textarea resizing. Let us see how it can effect the textarea.Add more long content to the text are. Disable Textarea resizing. Let us see how it can effect the textarea.Add more long content to the text are.Disable Textarea resizing. Let us see how it can effect the textarea.Add more long content to the text are.Disable Textarea resizing. Let us see how it can effect the textarea.Add more long content to the text are.</textarea>
</body>
</html>
Output
Here is the output of the above program. As we can see that for long content it add the scroll to the textarea.
Conclusion
So, we can easily disable resizing of textarea using CSS3 resize property. The height and width of textarea remain constant. For longer contents, it adds the scroll to the text area.
