如何在texarea中顯示線條使其看起來像記事本？

我需要在我的文本區域顯示行，使其看起來像記事本。我只有一個文本區域。下面的記事本供參考。如何在texarea中顯示線條使其看起來像記事本？

enter image description here

來源

2012-02-15 Anshul

.box的{ 背景：#FFFFFF URL（Image.gif的）不重複左; text-align：center; } 試試這個 – 2012-02-15 08:05:40

這裏有一個想法：http://www.bookofzeus.com/articles/css-styling-textarea-give-notebook-notepad-look/

簡而言之：設置background-image並設置line-height到任何行高圖像使用。

來源

2012-02-15 08:07:37 Simon

儘管如此，你必須確保圖像完全正確。其他人發佈的示例在幾行之後就已經發布。只要有滾動條，您發佈的示例就會中斷。 – DisgruntledGoat 2012-02-15 15:04:43

讓它不被打破絕對是這裏的挑戰。我自己並沒有嘗試過，但我會懷疑，如果您創建的圖像高度爲20px，則將其重複爲背景圖像，並將行高設置爲20px，並將其對齊。我想你也應該避免在內容中使用過大的內嵌塊，這可能會使行高下移幾個像素。 – Simon 2012-02-15 16:33:53

滾動時背景也需要移動。否則，您可以滾動半行，文本覆蓋行，而不是行間。 – DisgruntledGoat 2012-02-15 16:37:58

這應該讓你開始：

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/

來源

2012-02-15 08:08:23 PiTheNumber

爲什麼？使用背景圖片，這就是它的存在！ – 2012-02-15 08:10:45

感謝您的提示。背景更好，無需投票... – PiTheNumber 2012-02-15 08:17:02

Downvote刪除。不要害怕downvotes，認爲它們是建設性的意見，以幫助您改進。如果你的回答沒有幫助/不正確，你會被低估並通知它。這就是爲什麼我總是在我失敗後留下評論的原因。快樂編輯！ – 2012-02-15 08:22:35

添加通過CSS的背景圖像應該工作。

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

look at here

來源

2012-02-15 08:08:35 CyrillC

你可以用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這裏

來源

2012-02-15 08:08:50 epoch

看起來更好，如果你可以看到整個圖像：http://stackoverflow.com/a/9289821/956397 – PiTheNumber 2012-02-15 08:24:59

試試這一個作爲井

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

希望這有助於。

來源

2012-02-15 08:10:50

這是西蒙的鏈接的精確副本... – epoch 2012-02-15 08:13:02

可能我們都在同一時間點擊鏈接。我第一次嘗試，如果它的工作，然後張貼在這裏。 – 2012-02-15 08:16:39

當然，我不是說它有一個壞的意圖，只是說:)。 – epoch 2012-02-15 08:19:42

您可以檢查嘗試

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

來源

2012-02-15 08:14:33

如何在texarea中顯示線條使其看起來像記事本？

回答

相關問題