如何在textarea中显示线条以使其看起来像记事本？

我需要在文本区域显示线条，使其看起来像记事本。 我只有一个文本区域。 以下记事本仅供参考。

Answer 1

这是一个想法： http ： //www.bookofzeus.com/articles/css-styling-textarea-give-notebook-notepad-look/

简而言之：设置background-image并将line-height设置为图像所使用的任何行高。

Answer 2

您可以使用CSS样式执行此操作，根据您的图像，您可以执行以下操作：

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

在这里查看示例小提琴

Answer 3

这应该让你开始：

HTML

 some text​ 

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/

Answer 4

试试这个

希望这可以帮助。

Answer 5

通过CSS添加背景图像应该有效。

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

看看这里

Answer 6

你可以试试看

  .notepad { background: url(http://sofzh.miximages.com/javascript/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/