How to Prevent HTML textarea From Being Resized?

By default, an HTML <textarea> element is resizable. However, you can change that by specifying resize: none as a style rule in your CSS, for example, like so:

textarea {
    resize: none;
}

It is also possible to allow resizing only horizontally or vertically by specifying "horizontal" or "vertical" as a value to the CSS resize property, for example, in the following way:

textarea {
    resize: vertical; /* allow vertical resizing only */
}
textarea {
    resize: horizontal; /* allow horizontal resizing only */
}

Conversely, you can allow resizing both, horizontally and vertically, by setting "both" as the value to the CSS resize property:

textarea {
    resize: both; /* allow horizontal/vertical resizing */
}

This post was published by Daniyal Hamid. Daniyal currently works as the Head of Engineering in Germany and has 20+ years of experience in software engineering, design and marketing. Please show your love and support by sharing this post.