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.

Before

Before

After

After

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.

Reply

ZAM April 6, 2009 at 3:55 am

Very nice, thanks for the help…!!

Reply

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?

Reply

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.

Reply

Norman July 4, 2009 at 9:24 am

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

Reply

Jotun July 31, 2009 at 12:44 pm

Thanks for the help.
However, I had a little bit of difficulty. Using Chrome 2.0.172.37, 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:

#note_edit_pane{
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.

Reply

Efe Buyuran October 4, 2010 at 2:56 am

Thanks for da tip mate )

Reply

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.

Reply

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.

Reply

Bob Kruithof March 17, 2011 at 2:10 am

@ Danish Backer:

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

Reply

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 ..

Reply

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.

Reply

Jethro123 May 5, 2011 at 2:10 pm

Very useful. Thank you very much.

Reply

Michael June 27, 2011 at 12:26 pm

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

http://www.ajaxera.com/jquery-sexy-tools-textarea/

Reply

Rute July 5, 2011 at 9:56 pm

Thank you!

Reply

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.

Reply

Felipe Mota August 5, 2011 at 7:48 am

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

Reply

Beraki August 31, 2011 at 10:29 pm

cool thanks

Reply

Felipe Mota September 6, 2011 at 2:21 pm

But this code works on Firefox too, right?

Reply

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

Reply

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.

Reply

ReBirthal October 1, 2011 at 8:00 pm

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

Reply

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

Thanks for the tip!!

Reply

Mekey Salaria December 14, 2011 at 11:38 pm

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

Reply

Mekey Salaria January 16, 2012 at 8:53 am

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

Reply

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!

Reply

sohaib March 21, 2012 at 12:33 am

thank you soo much :)

Reply

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 :)

Reply

Baburao April 22, 2012 at 9:27 pm

Thank you so much!!!!

Reply

Cris May 15, 2012 at 2:08 pm

Thank you so so much!!

Reply

Prashanth Gade July 11, 2012 at 4:32 am

it’s very useful, Thank you so much!

Reply

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

Reply

mohid_ist September 5, 2012 at 8:53 pm

thanks lot it works on firefox browser !!

Reply

Elham September 9, 2012 at 9:13 pm

Cool,Thanks

Reply

Muthu October 1, 2012 at 11:08 pm

Thank you very much Yar!

It’s Working……….

Reply

Digital Apex October 5, 2012 at 2:24 am

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

Reply

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%;

Cheers,

Reply

nfrost21 November 29, 2012 at 3:32 am

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

Reply

Manoj Gupta January 27, 2013 at 9:51 pm

thanks a lot .. its working..

Reply

Okiemute Omuta February 7, 2013 at 4:15 pm

THANKS A MILLLLLLLL!!!!!

Reply

Jp March 11, 2013 at 6:45 pm

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

Reply

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

Very nice and helpful :-)

Thank you Brett.

Reply

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

Reply

madhavan July 12, 2013 at 7:11 am

Thank u very much saved my hrs of searching

Reply

Omid July 15, 2013 at 8:32 pm

Thank yo so much that was really usefull to me

Reply

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

Reply

Shahid August 6, 2013 at 4:11 am

Timesaviour :)

Reply

abhijeet August 26, 2013 at 9:32 pm

thanks.

Reply

richard January 30, 2014 at 10:29 pm

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

Reply

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

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

Reply

Leave a Comment

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

Previous post:

Next post: