How can I show lines in a textarea to make it look like notepad?

Question

I need to show lines in my text-area to make it look a like notepad. I have a single text-area only. The below notepad is for reference.

Answer 1

Here's an idea: http://www.bookofzeus.com/articles/css-styling-textarea-give-notebook-notepad-look/

In short: set a background-image and set line-height to whatever line height the image is using.

Answer 2

You can do this with CSS styling, based on your image, you can do this:

​textarea#area {
    width: 300px;
    height: 400px;
    padding: 0 0 0 20px;
    line-height: 30px;
    background: #fff url("http://i.stack.imgur.com/UfzKa.jpg") no-repeat -75px -160px
}​

See the example fiddle here

Answer 3

This should get you started:

HTML

<textarea class="text">some text</textarea>​

CSS

.text {
    background: url(http://i.stack.imgur.com/UfzKa.jpg);
    height: 664px;
    width: 495px;
    line-height: 29px;
    padding-top: 136px;
    padding-left: 120px;
}​

Demo http://jsfiddle.net/ptpgb/4/

Answer 4

Try this one as well

<style type="text/css">
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;
}

</style>

Hope this helps.

Answer 5

Adding a background image via CSS should work.

textarea{ background-image:url(notepad.png); color:ff0000; }

look at here

Answer 6

You can check try

<textarea class="notepad"></textarea>

.notepad {
 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;
}

http://jsfiddle.net/FzFaq/1/