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>
    <textarea style=”overflow:auto;resize:none” rows=”20″  cols=”20″></textarea>

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

Kalpesh Patel

Founder & Owner at Aarav Web Solutions . Working for business development related to Web Design & Development. Also working with client in India & for outsourcing projects. Visit our website Aarav Web Solutions to see more about completed projects for clients. Focus in product development and we have developed our two own product listed below: Classified Website In India and Deals & Offer Website In India