How to disable textarea resize in HTML

In this article we will learn how to disable the textarea resize in HTML, that is, make it impossible for the user to change the size of this input with a CSS line.

Hey you programmer, okay? Let’s learn something new!

So, come on!

The idea of limiting the resize of a textarea is, most of the time, not to break the layout

But removing a possibility from the client of an action that is commonly applied sounds  bad, so we must think carefully about this issue

That said, we use the CSS resize property with a value of none

This action will make that symbol of modifying size disappear. Let’s see it in the code lines?

<textarea id="long_text" placeholder="Some message here..."></textarea>

We will have the following return with this HTML in the browser:

And now adding the property to CSS:

#long_text {
 resize: none;
}

See what happens:

Note that the size change symbol is gone, it was in the lower right corner, compare the images

So now it’s up to us developers to change the width and height of the textarea to what the project asks for

And we no longer need to worry about this client resize action

That’s it! We learned how to disable the textarea resize, now we can apply it to our projects 😀

Conclusion

In this article we learned the possibility of removing the resize of a textarea

For this we use the resize property with the value none

What modifies the element and makes it unable to be changed by the client

But we can change its width and height freely

Want to learn more about HTML and CSS? Click here!