How to disable or limit the resizing of a textarea

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.

Disabling the resizing of an HTML textarea field

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;
}

Limiting the resizing of an HTML textarea field

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.