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.



Kalpesh Patel

Founder Of Nexus Software Group Leading IT solution and service provider and offering a full range of application development and I.T. consultancy services. Nexus Software Group Contributors In: post free ads online in India and post free ads online in USA