CSS Styling textarea to give a notebook/notepad look

Posted on Wednesday, December 14th 2011 / by Eric Potvin

Textarea are use in many sites for multiple purposes. Depending on what type of information your form has, here's a little trick to make them more attractive!

First, you will have find an image you like, or you can use this one:

Next, simply add this CSS code:

textarea {
 background: url(/download/notebook.png) repeat-y;
 width: 600px;
 height: 300px;
 font: normal 14px verdana;
 line-height: 25px;
 padding: 2px 10px;
 border: solid 1px #ddd;
}

The end result should look like this:

4 comments:

Comments will re-open soon.

posted annonymously
Eric Sunday, October 07th 2012

Nathan, I am sure there's a way to update the code to match what you need. I would recommend first to look at the CSS3 pattern @ http://lea.verou.me/css3patterns/#lined-paper first.

posted annonymously
Will Sunday, October 07th 2012

This looks great, thanks!

posted annonymously
Daniel Friday, March 23rd 2012

Thanks, great work!

posted annonymously
Wednesday, December 28, 2011 Wednesday, December 28th 2011

hey, this is great..thanks alot