Book
Of Zeus
Articles, Tutorials & Source Code
About
Contribute
© 2011-2025 Book of Zeus
All articles, code or tutorials listed on bookofzeus.com/ can be used as reference, links or as in a sharing matter without attribution.
You cannot copy whole tutorials (unless permission is given), either translating to another language.
Unless required by applicable law or agreed to in writing,
software distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
By using and/or reading this site, you agree to our privacy policy and terms and conditions .
CSS Styling textarea to give a notebook/notepad look
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 to 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: