James John – Software Engineer

How to create re-sizable div or textarea like div using CSS3

Hi all

Latest HTML5 and CSS3 has made web designing easy for us, I pray soon Jquery will fade off. Now with CSS3 you can create  a text area like div, the best thing i like about HTML5 is the placeholder in text fields.

Now lets create re-sizable div using CSS3, copy the code below and save with test.html and open with your browser

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <style>
  5. .test
  6. {
  7. border:2px solid;
  8. padding:10px 40px;
  9. width:300px;
  10. resize:both;
  11. overflow:auto;
  12. }
  13. </style>
  14. </head>
  15. <body>
  16. <div class='test'>Testing re-sizable div</div>
  17. </body>
  18. </html>

Now run and see!

Works in Mozilla, Opera and Chrome only!

James John

Software Engineer