Мне нужно показать строки в моей текстовой области, чтобы она выглядела как блокнот. У меня есть только текстовая область. Нижеприведенный блокнот предназначен для справки.
Мне нужно показать строки в моей текстовой области, чтобы она выглядела как блокнот. У меня есть только текстовая область. Нижеприведенный блокнот предназначен для справки.
Вот идея: http://www.bookofzeus.com/articles/css-styling-textarea-give-notebook-notepad-look/
Короче: установите a background-image
и установите line-height
на любую высоту строки, которую использует изображение.
Вы можете сделать это с помощью стилей 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 здесь
Это должно помочь вам:
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;
}
Попробуйте это также
<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>
Надеюсь, что это поможет.
Добавление фонового изображения через CSS должно работать.
textarea{ background-image:url(notepad.png); color:ff0000; }
Вы можете проверить 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;
}