The resize
CSS property can be used to disable or limit the resizing of a <textarea>
HTML element on a web page.
In modern web browsers, the <textarea>
HTML element is resizable by default, allowing the user to elect to see more of what they have typed in that field if desired.
The issue with this is that when a textarea field is resized, it can change or break the layout of a web page, leading to an unintended and unsightly look.
Fortunately, you can use the resize
CSS property to disable or limit the resizing of <textarea>
elements.
In this example, you have a textarea field on a HTML page:
<html>
<body>
<form>
<textarea></textarea>
<input type="submit">
</form>
</body>
</html>
To prevent the textarea
field from being resized by the user, set the resize
CSS property tonone
:
textarea {
resize: none;
}
If you wish to allow the user to resize the textarea
field, but only vertically, set the resize
CSS property to vertical
instead:
textarea {
resize: vertical;
}
That’s all there is to it! The textarea is now only resizable vertically.
You may also like:
Love our articles? HostM offers professional and helpful web hosting services with unlimited features and renewal rates that actually match our advertised rates.
From $2.98/mo
We can help you move your
email and websites as desired.