Как я могу показать строки в тексарии, чтобы она выглядела как блокнот?

Мне нужно показать строки в моей текстовой области, чтобы она выглядела как блокнот. У меня есть только текстовая область. Нижеприведенный блокнот предназначен для справки.

Ответ 1

Вот идея: http://www.bookofzeus.com/articles/css-styling-textarea-give-notebook-notepad-look/

Короче: установите a background-image и установите line-height на любую высоту строки, которую использует изображение.

Ответ 2

Вы можете сделать это с помощью стилей CSS, основываясь на вашем изображении, вы можете сделать это:

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
}

См. пример fiddle здесь

Ответ 3

Это должно помочь вам:

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;
}

Демо http://jsfiddle.net/ptpgb/4/

Ответ 4

Попробуйте это также

<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>

Надеюсь, что это поможет.

Ответ 5

Добавление фонового изображения через CSS должно работать.

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

посмотреть здесь

Ответ 6

Вы можете проверить 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/