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: