In this quick tip, we’re going to show you 2 different ways to disable the resizing of a textarea
, for those times when you don’t want the user to be able to control it in this manner. It’s a relatively quick process, with just some simple CSS using the resize
CSS property.
Your Designer Toolbox Unlimited Downloads: 500,000+ Web Templates, Icon Sets, Themes & Design Assets
HTML
The HTML textarea
element provides a resizable property by default. To disable it, you can use the CSS property resize: none
in the textarea
element. Here is an example:
<textarea style="resize: none;"></textarea>
CSS
You can also disable the resizable property of a textarea
by using CSS that is not inline. You can add a class to the textarea
element and then add the CSS property resize: none
to the class. Here is an example:
<textarea class="no-resize"></textarea> <style> .no-resize { resize: none; } </style>