CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Anshul
Anshul

Reputation: 7964

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

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.

enter image description here

Upvotes: 10

Views: 6106

Answers (6)

Simon
Simon

Reputation: 3717

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.

Upvotes: 12

PiTheNumber
PiTheNumber

Reputation: 23542

This should get you started:

HTML

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

CSS

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

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

Upvotes: 2

Shawn Taylor
Shawn Taylor

Reputation: 3969

You can check try

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

.notepad {
 background: url(https://i.sstatic.net/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/

Upvotes: 0

Deepak Kumar
Deepak Kumar

Reputation: 682

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.

Upvotes: 1

epoch
epoch

Reputation: 16595

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("https://i.sstatic.net/UfzKa.jpg") no-repeat -75px -160px
}​

See the example fiddle here

Upvotes: 11

CyrillC
CyrillC

Reputation: 557

Adding a background image via CSS should work.

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

look at here

Upvotes: 0

Related Questions