Signup/Sign In

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.

Disable resizing

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.

long contents in text area

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.