Turn off resize textarea in Chrome & Safari

by Brett on February 23, 2009

Chrome Textarea

Chrome Textarea

There is a new feature in both Safari and Chrome that allows a textarea to be resized by the user. In both browsers the feature is seen by a little icon that is in the bottom right corner of the textarea. This feature gives the user the ability to choose how much space they need for whatever it is they are writing.

For some websites this new feature may not be desired as resizing the textarea could break the layout of the website. I can think of a few ways to prevent the layout from breaking.

  1. Design the page with a liquid layout
  2. Turn off the users ability to resize the textarea
  3. Give the textarea a max size

Redesigning the site with a liquid layout can be a lot of work and may not be optimal for the look & feel for the site. Many designers prefer to lock the site at a certain width to guarantee that everyone will see a website that looks exactly the same.

It is very easy to turn off the users ability to resize the textarea. Turning this feature off may be necessary due to the design of certain sites or to make it harder for the user to write a 100 page document in a small comment box. The following CSS can be used to remove the users ability to resize the textarea:

textarea{resize: none}

Place that code in your css file to remove the users ability to resize any textarea on the site. You could also remove it from 1 textarea on a page with inline css.

The third option of giving the textarea a max size has a similar solution of using css. The two properties that can be used are max-width and max-height. This will give the user the ability to resize the textarea but limit them to a certain max size. The css would look something like the following.

textarea{max-width: 100px; max-height: 100px;}

Of course you may only want to use one of the above properties to allow the user to grow the height to any size but not resize the width or vice versa.

An example of a site that could use one of the above steps is whitehouse.gov. There are two screen shots below that show the before and after of the user resizing the textarea.

Browsers giving the user the ability to resize a textarea is a great feature but it creates one more item that designers and developers need to be aware of when adding a textarea to a page.





Share This Post

{ 50 comments… read them below or add one }

Igor Skomorokh March 18, 2009 at 6:48 am

Thank you very much! Very helpful info.


ZAM April 6, 2009 at 3:55 am

Very nice, thanks for the help…!!


Danish Backer June 19, 2009 at 2:13 am

Thanks a lot!
It worked.

One more help needed
How to remove yellow highlight in chrome?


XBS from Forex Service June 25, 2009 at 5:21 pm

Thank you very much. Worked like a charm. Now I’ve finally fixed my registration form.


Norman July 4, 2009 at 9:24 am

thanks a lot. what an annoying “feature”. :)


Jotun July 31, 2009 at 12:44 pm

Thanks for the help.
However, I had a little bit of difficulty. Using Chrome, implementing either the max-height and max-width values equal to the original dimensions of the textarea somehow only led to the textarea being resizeable in one direction (horizontally, if the max-width was the first declaration in the code or vertically if max-height came first). And when only putting in the resize: none; to the style (not maximum dimension values), the textarea was resizeable. But when adding both the resize: none; and maximum dimension values, the textarea remained fixed.

Here’s my code:

width: 600px;
height: 450px;

resize: none;
max-width: 600px;
max-height: 450px;


After messing around a bit more with the code, it appears as if the html comment makes the next line of code be ignored. Using a css comment /* */, however, it fixes the problem. d’oh.

On a side note, I’m writing this post in chrome in a text area, that ironically, can be resized to the extent that it breaks the page.


Efe Buyuran October 4, 2010 at 2:56 am

Thanks for da tip mate )


Alexander Ewering November 27, 2010 at 3:58 pm

I wonder what the Chrome people were thinking (I wonder that quite often regarding programmers in general). Why would someone keep introduce invasive, nonsensical features without asking, like the resizable textarea, the yellow border around focused inputs (that’s the decision of the web developer), or Chrome completely and silently ignoring popup windows.


Thomas February 1, 2011 at 8:27 pm

@Brett: thanks, informative and balanced.

@Alexander and others like him: I’m not sure you know who’s in command.
I guess, Google thought, stick with usability standards and let the user decide what they want to see and act on.
I agree that textareas should be useful and render properly from the start.
But I guess you’ve never seen a ridiculously small web mail or comment field.
Same for popups. Why a popup rather than a proper new tab? I agree insofar as I’d prefer a proper warning that the site’s trying irritating things.
Next in line: resizable windows, hiding controls.

Actually, those are some of the reasons why I prefer Gmail over my former and some mail providers.
And for the record: each of my browsers does some ‘hideous’ stuff to Google’s sites and yours.


Bob Kruithof March 17, 2011 at 2:10 am

@ Danish Backer:

How to remove yellow highlight in chrome?
textarea { outline: none; }


widi dwi April 2, 2011 at 3:17 am

this article help me alot … i thought to much how to disable textarea resize … but it`s only a line to stop it ….

thank you ..


John Lydic April 9, 2011 at 1:59 am

And Firefox. Wow, I found my answer on the very first Google. Thanks for the quick and easy solution.

Now, how much for a PayPal app for parallel payments? I want to direct a percentage of every purchase from my sites to the ASPCA.

Reading over your site and blog is sooo humbling!

Thanks again.


Jethro123 May 5, 2011 at 2:10 pm

Very useful. Thank you very much.


Michael June 27, 2011 at 12:26 pm

I found a site that has an example of a jquery sexy liquid textarea



Rute July 5, 2011 at 9:56 pm

Thank you!


OMA July 14, 2011 at 7:49 am

I hope not too many people follow the “resize: none” route. Why give less functionality and usability to your users?

Textareas are supposed to be used when a long text string needs to be written (for example, a contact form), and I hate writing a long text in a tiny letterbox area with only 3 or 4 lines visible at a time (similarly, I find incredibly cumbersome to read terms & conditions in a similarly sized area, and most of them are like that; no wonder nobody reads it!). Specially I hate it when I have a large 24 inch monitor, but still I have to be constrained to writing in a ridiculously tiny space.

I think the best compromise is using ONLY the “max-width” attribute to constrain what the user can resize. That way, resizing the textarea horizontally won’t break your great CSS layout, but still the user can resize vertically to accomodate more text without the need to scroll. If you use a liquid layout, and any good CSS designer should, if should be no problem to have a vertically resizable textarea.


Felipe Mota August 5, 2011 at 7:48 am

Yes, I was wondering about that feature. Thanks! :)


Beraki August 31, 2011 at 10:29 pm

cool thanks


Felipe Mota September 6, 2011 at 2:21 pm

But this code works on Firefox too, right?


enrico September 20, 2011 at 8:24 pm

Very good tips, unfortunately half of this planet still uses i.e while using internet, so this is not crossbroweser, meaning that a lot of users will still be able to resize the textarea changing the content flow of the entire page


Brett September 21, 2011 at 12:11 pm

@enrico IE does not give the user the option to re-size the textarea so this solution is not needed for IE.


ReBirthal October 1, 2011 at 8:00 pm

Thank you very much.
You solved my problems.
It’s very useful. ^^”


Germán October 4, 2011 at 6:45 am

Thanks for the tip!!


Mekey Salaria December 14, 2011 at 11:38 pm

Thanks! It even worked for Mozilla Firefox!! :)


Mekey Salaria January 16, 2012 at 8:53 am

Thank you so much..
it worked for Mozilla Firefox as well!! :))


Eddie Brewer February 17, 2012 at 5:48 am

Thank you so much, I’d like to inform you if you didn’t already know.
This works on all browsers! (:
Thank you sooo much!


sohaib March 21, 2012 at 12:33 am

thank you soo much :)


Mirta - Recipes Cookbook March 26, 2012 at 7:12 am

Thanks so much Brett, you save me for hours of nonsense research. Please keep yourself involve in posting good solutions like this one :)


Baburao April 22, 2012 at 9:27 pm

Thank you so much!!!!


Cris May 15, 2012 at 2:08 pm

Thank you so so much!!


Prashanth Gade July 11, 2012 at 4:32 am

it’s very useful, Thank you so much!


Gupta August 12, 2012 at 11:22 am

very nice. I am a learner css and this is really helpful for me. thanks a lot for nice informative blog


mohid_ist September 5, 2012 at 8:53 pm

thanks lot it works on firefox browser !!


Elham September 9, 2012 at 9:13 pm



Muthu October 1, 2012 at 11:08 pm

Thank you very much Yar!

It’s Working……….


Digital Apex October 5, 2012 at 2:24 am

Thanks you for sharing, works like a charm. Great work.


Saurabh Kumar October 23, 2012 at 3:47 am

If you like to restrict the size only horizontally, while maintaining a responsive layout, you would to the property as follows:

max-width: 100%;
min-width: 100%;



nfrost21 November 29, 2012 at 3:32 am

Great tip and well explained! – (works in Firefox also – although not specified in the post.) – cheers.


Manoj Gupta January 27, 2013 at 9:51 pm

thanks a lot .. its working..


Okiemute Omuta February 7, 2013 at 4:15 pm



Jp March 11, 2013 at 6:45 pm

Thanks Brett, that’s a nice solution. :)


Umair Hafeez Mughal April 23, 2013 at 1:15 am

Very nice and helpful :-)

Thank you Brett.


LP April 25, 2013 at 1:00 am

Thank You very much…..
it helped me a lot…

am struglling form last 2hr’s on this resizing


madhavan July 12, 2013 at 7:11 am

Thank u very much saved my hrs of searching


Omid July 15, 2013 at 8:32 pm

Thank yo so much that was really usefull to me


Haziel July 23, 2013 at 3:26 pm

Well my friend you are awesome, this helped me with some forms i had to add, this was ruining it completely, i added the resize:none; to my css and worked like a clock, thanks a lot


Shahid August 6, 2013 at 4:11 am

Timesaviour :)


abhijeet August 26, 2013 at 9:32 pm



richard January 30, 2014 at 10:29 pm

In the example screen, I would also consider using
so that the textarea can be resized down the page.


a.radwan March 19, 2014 at 7:38 am

Oooh my God,
All of this article for — resize: none


Leave a Comment

Notify me of followup comments via e-mail. You can also subscribe without commenting.

Previous post:

Next post: