Tutorial to Customize Textarea Resizing with CSS

New Generation browser provide the more supported css which older browser not supported. We can do re sizing of text area using only css now.  One of those subtle features is the ability to control text area re sizing.
 

textarea area image

 
Let me show you here how to control re-sizing of text-area with CSS.

  textarea { resize:both; }
  /* this will resize horizontal and vertical both */
  textarea.vresize { resize:vertical; }
  textarea.noResize { resize:none; }

In Above example none is to disable the resizing of textarea, resize:vertical is used to resize only vertical, resize:horizontal is used to resize only horizontal , resize:both will resize both horizontal  and vertical

we can also disable the textarea to resize using class css
see the following example.

  <TextArea id=”tarea”>Some Text will go here</TextArea>
  #tarea {  resize: none;}

The above example is css3 and it will be not work in older browser so i am writing the other example which work fine Firefox, chrome and safari.

  <!DOCTYPE html>
  <html>
  <head>
  </head>
  <body>
    <textarea style=”overflow:auto;resize:none” rows=”20″  cols=”20″></textarea>
  </body>
  </html>

so as in example another format feature is to overflow:auto to get rid of the right scroll bar.

2 thoughts on “Tutorial to Customize Textarea Resizing with CSS

  1. Hi there, I found your web site by the use of Google whilst searching for a comparable matter, your web site got here up, it looks good.
    I’ve bookmarked it in my google bookmarks.
    Hello there, simply changed into alert to your weblog
    thru Google, and found that it is really informative.
    I’m gonna be careful for brussels. I’ll appreciate should you continue this in future.
    Numerous other people might be benefited out of your writing.
    Cheers!

  2. Awesome site you have here but I was curious if you knew of any message
    boards that cover the same topics discussed in this article?
    I’d really like to be a part of group where I can get advice from other knowledgeable people that share the same interest.
    If you have any suggestions, please let me know.
    Many thanks!

Leave a Reply

Your email address will not be published. Required fields are marked *