CSS Styling text areas like notebook-look

content01 picture content01 · Nov 29, 2011 · Viewed 51.8k times · Source

It is possible to style a text area so each row have a dotted underline (like a notebook or a notes-block)?

The number of lines should be fixed to lets say 10.

Answer

Book Of Zeus picture Book Of Zeus · Nov 29, 2011

Here's probably what you looking for:

line

<style type="text/css">
textarea {
 background: url(http://i.stack.imgur.com/ynxjD.png) repeat-y;
 width: 600px;
 height: 300px;
 font: normal 14px verdana;
 line-height: 25px;
 padding: 2px 10px;
 border: solid 1px #ddd;
}

</style>
<textarea>
    Textarea with style example
    Line 1
    Line 2
    Line 3
    Line 4
    Line 5
    Line 6
    Line 7
    Line n
</textarea>

Or you can read this articles that tells you how to do it from scratch:

Creating a Notebook Background