CSS Styling textarea to give a notebook/notepad look
Wednesday, December 14, 2011 EST
by: Eric Potvin
Tags:css
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(/source/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:
Link to this Article
To link directly to this article from your web site, use one of the following snippets below.
CSS Styling textarea to give a notebook/notepad look | Book Of Zeus<a href="http://www.bookofzeus.com/articles/css-styling-textarea-give-notebook-notepad-look/" title="CSS Styling textarea to give a notebook/notepad look">CSS Styling textarea to give a notebook/notepad look | Book Of Zeus</a>
Short URL:
CSS Styling textarea to give a notebook/notepad look | Book Of Zeus<a href="http://s.bookofzeus.com/Q7zWt" title="CSS Styling textarea to give a notebook/notepad look Short URL">CSS Styling textarea to give a notebook/notepad look | Book Of Zeus</a>