Disable textarea Resizing

Normally whenever we use textarea in pages, the browser allows the user to resize it, but at times this is not wanted(as it might screw the other aspects of the design). Here is how we can disable textarea resizing using basic CSS.

Old Method

In the old method, we needed to to specify the value of the CSS property of the

max-height/max-width same as height/width.

textarea { height:300px; width:400px; max-height:300px; max-width:400px; }

Though this method will work out well, but we still see that “resize” icon in corner.

New CSS3 Method

Hence, there is a better way to do this in CSS3. Instead of specifying the

max-height/max-width, we can simply mention resize: none.

textarea { height:300px; width:400px; resize:none; }

It works the same way, and this time without the “resize” icon in corner.

Optional/Conditional Resizing

For enabling only the horizontal resizing, we can replace the none with horizontal.

textarea { height:300px; width:400px; resize:horizontal; }

Similarly for enabling only the vertical resizing, we can replace the none with vertical.

textarea { height:300px; width:400px; resize:vertical; }
  • Franco Centurion

    Buenisimo! :D lo necesitaba

  • Thanks for this a simple bit of CSS to fix a lot of issues and stop the client from destroying the website.

  • uu

    not working for me FF12

  • oh necessary tips

  • Pingback: WordPress Development | Annotary()

  • You can also do it inline if you have multiple textareas of different sizes on the same site, like this:

  • Guess the code in my previous comment got stripped so here is what you need to insert into the textarea tag:

    style="resize:none"