Quick Tip: How To Disable Resizing of a Textarea in HTML or CSS

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>