O'Reilly

Customize Textarea Resizing with CSS

By on  

Webkit-based web browsers like Safari and Chrome have led web innovation the past few years.  Whether its implementing new JavaScript APIs, providing more CSS capabilities than other browsers, or simply providing blazing-fast page rendering, WebKit has been head and shoulders above other browsers in page control and CSS features.  One of those subtle features is the ability to control textarea resizing.  FireFox will provide this same capability in Firefox 4.  Let me show how to control textarea resizing with CSS.

The CSS

Textarea resize control is available via the CSS3 resize property:

textarea { resize:both; } /* none|horizontal|vertical|both */
textarea.vert { resize:vertical; }
textarea.noResize { resize:none; }

Allowable values self-explanatory:  none (disables textarea resizing), both, vertical and horizontal.  The default in Firefox, Safari, and Chrome is both.

If you want to constrain the width and height of the textarea element, that's not a problem:  these browsers also respect max-height, max-width, min-height, and min-width CSS properties to provide resizing within certain proportions:

#confinedSpace textarea { resize:vertical; max-height:300px; min-height:200px; }
#confinedSpace textarea.horiz { resize:horizontal; max-width:400px; min-width:200px; }

Textarea resizing is hugely helpful when you're looking to post a long message.  Of course sometimes you may want to disable textarea resizing to accommodate a design, and that's fine too.  As a general rule, however, you should allow resizing.

Track.js Error Reporting

Recent Features

  • CSS 3D Folding Animation

    Google Plus provides loads of inspiration for front-end developers, especially when it comes to the CSS and JavaScript wonders they create. Last year I duplicated their incredible PhotoStack effect with both MooTools and pure CSS; this time I'm going to duplicate...

  • 6 Things You Didn’t Know About Firefox OS

    Firefox OS is all over the tech news and for good reason:  Mozilla's finally given web developers the platform that they need to create apps the way they've been creating them for years -- with CSS, HTML, and JavaScript.  Firefox OS has been rapidly improving,...

Incredible Demos

  • Create a Simple Slideshow Using MooTools

    One excellent way to add dynamism to any website is to implement a slideshow featuring images or sliding content. Of course there are numerous slideshow plugins available but many of them can be overkill if you want to do simple slideshow without controls or events....

  • PHP / MooTools 1.2 Accordion Helper

    The MooTools Accordion plugin seems to be the plugin that people seem to have the most problems with. It's an awesome plugin, so I can see why so many people want to use it, but I think that may be part of the problem....

Discussion

  1. text area deyince bende bişi anlatacak sandım

  2. thank, don’t lnow about resize in css

  3. Thank you very much! I didn’t know this css attribute. Is it supportet by IE?

    • Just did an IE10 check and textarea resizing is still not supported.

  4. Matt

    No, IE will not support Resize. Check (http://www.impressivewebs.com/css3-support-ie9/) for a table with what CSS3 attributes are supported. Best to stick with jQuery to get cross-browser compatibility if you want to implement this.

  5. Sanjay Patel

    It work’s on Both Firefox and IE9.

    i.e.

    .textareaResize { resize:none;} in CSS class.

  6. Michael

    I found a page that has a liquid jquery textarea that looks good.

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

  7. I do not recommend the use of Internet Explorer because it is very stupid

  8. I try “resize: vertical” and it works in Firefox (8), but it doesn’t work in Chrome (15) and Safari.

  9. kab00m

    I hate IE, never do what I want

  10. I think that IE is the worst browser ever.

    • Trooper

      Its not IE’s fault, its on W3C. Take a look at this http://www.w3.org/TR/css3-ui/#resize The paper is still in the Working Draft. And if you haven’t heard of the story what happened with gradient and ohter browsers, read this http://blogs.msdn.com/b/ie/archive/2012/06/25/unprefixed-css3-gradients-in-ie10.aspx. Its mandatory for a vendor to wait for the recommendation by W3C and then give the complete support.

      IE10 is getting very fast and complying with HTML5 and CSS3 standard to FULL extent. Take an example of placeholder attribute of HTML5 tag..

      Firefox provide :-moz-placeholder for CSS3.

      Safari and Chrome provide ::webkit-input-placeholder.

      IE10 provide :-ms-input-placeholder

      If I tell you this information, you may say its a good thing that most browsers support this HTML5 & CSS3 feature and you will move on. But what about “the quality” of this implementation: Firefox doesn’t support line-height property for placeholder. Chrome doesn’t support padding, Safari supports 5 out of 13 properties listed here http://newilk.com/testing/Placeholder_styling

      Opera dropped the support of placeholder styling since Opera 11.

      IE10 is the only browser supporting all properties for placeholder style.

  11. Neetu

    Thanks alot…. it works… :D

  12. Is it possible to style the resize handle with CSS ?

    • I highly doubt it :(

    • Greg

      In webkit you can play around with the scrollbar styling.
      I used >

      ::-webkit-resizer{background-color:transparent;}
      ::-webkit-scrollbar-corner{background-color:rgba(0,0,0,0.2);}
      

      to style the resizer on the textareas in one of my sites.

  13. tienduydlu

    I have a question?
    When i try to resize this text area. All component under this text area will auto push down or push up when i expand or collapse text area. How can i do it? Please and thanks so much?

  14. mahamad

    You can just check

    I think that is working in every browser … i am sure ….

  15. Thanks you David!
    For a compatibility on each browser: http://caniuse.com/#search=resize

  16. But what does *not* seem to work in even the most recent FF is:
    min-height: 100%;

  17. Channu Yatnur

    Hi,
    I need help,
    I want resize iframe by dragging right bottom corner but its working in all browsers but not in IE,is there any solution for this to work in IE..?

  18. David, I’ve found your website so helpful over the years. Whenever I’m looking for a solution to a specific problem like this, your website is always one I can rely one. This page is just the latest in a long line of examples.

    Thank you for doing what you do and being the help you are. Cheers!

Wrap your code in <pre class="{language}"></pre> tags, link to a GitHub gist, JSFiddle fiddle, or CodePen pen to embed!

Recently on David Walsh Blog

  • Follow Redirects with cURL

    I love playing around with cURL. There's something about loading websites via command line that makes me feel like some type of smug hacker, just like tweeting from command line does. I recently cURL'd the Google homepage and saw the following: I found it weird that Google...

  • Developers Have WordPress, Amateurs Have Squarespace, Professional Designers Have the NEW Webydo!

    Web design platforms have traditionally come in one of two varieties. There are the solutions like WordPress and Drupal that are incredibly powerful, but an understanding of web development and coding is required to be able to use those platforms effectively. On the other side of the...

  • Chris Coyierâs Favorite CodePen Demos II

    Hey everyone! Before we get started, I just want to say it’s damn hard to pick this few favorites on CodePen. Not because, as a co-founder of CodePen, I feel like a dad picking which kid he likes best (RUDE). But because there is just so...

  • GSAP + SVG For Power Users: Motion Along A Path

    Now that the GreenSock API is picking up steam, there are many tutorials and Getting Started guides out there to provide good introductions to the library, not to mention GreenSock’s own Forum and Documentation. This article isn’t intended for beginners, but rather a...

  • Copy a Directory from Command Line

    Copying a directory for the sake of backup is something I do often, especially when I'm trying to figure out why something isn't working when I use an external library.  I'll copy the directory structure as a backup, mess around with the original source until I find a solution,...