CSS樣式文本區域，如筆記本外觀

Question

可以設置文本區域的樣式，使每行都有一個虛線下划線（如筆記本或音符塊）？

行數應固定為10。

Answer 1

這可能是你要找的東西：

 <style type="text/css"> textarea { 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; } </style> <textarea> Textarea with style example Line 1 Line 2 Line 3 Line 4 Line 5 Line 6 Line 7 Line n </textarea> 

或者你可以閱讀這篇文章，告訴你如何從頭開始：

創建筆記本背景

Answer 2

純CSS3

<style>
    html{ height: 100%; }
    body
    {
        background-color: #f5f5f5;
    }
    textarea
    {
        border: 1px solid #EEEEEE;
        box-shadow: 1px 1px 0 #DDDDDD;
        display: block;
        font-family: 'Marck Script',cursive;
        font-size: 22px;
        line-height: 50px;
        margin: 2% auto;
        padding: 11px 20px 0 70px;
        resize: none;
        height: 689px;
        width: 530px;

        background-image: -moz-linear-gradient(top , transparent, transparent 49px,#E7EFF8 0px), -moz-radial-gradient(4% 50%, circle closest-corner, #f5f5f5, #f5f5f5 39%, transparent 0%), -moz-radial-gradient(3.9% 46% , circle closest-corner, #CCCCCC, #CCCCCC 43.5%, transparent 0%); 
        background-image: -webkit-linear-gradient(top , transparent, transparent 49px,#E7EFF8 0), -webkit-radial-gradient(4% 50%, circle closest-corner, #f5f5f5, #f5f5f5 39%, transparent 0%), -webkit-radial-gradient(3.9% 46%, circle closest-corner, #cccccc, #cccccc 43.5%, transparent 0%);

        -webkit-background-size:  100% 50px;
        background-size: 100% 50px;
    }
</style>

結果你可以看到這個鏈接： http ： //jsfiddle.net/Wolfsblvt/qc9rgm7r/

Answer 3

這些解決方案不支持溢出textarea。 因此滾動只滾動文本而不是背景。 要支持滾動，您應該添加“ background-attachment：local; “到textarea css。

Answer 4

如果您仍然對此主題感興趣，可以查看Paper text區域示例 - 僅在fivera的博客上使用css創建 。 很酷的是，你可以在現場玩這些例子。

Answer 5

滾動打破每個解決方案，一個完整的解決方案也應該使行滾動文本。 僅通過向textarea添加背景圖像很難實現。

Answer 6

我接受了另一個答案並將其升級到SCSS以使其可配置。 您現在可以輕松更改孔和規則的大小和顏色，並且所有內容都會相應地調整大小。

另外，我添加了另一個使用可編輯div而不是textarea的示例。

的jsfiddle

// rule config
$rule-height: 20px; // <-- primary parameter

   $font-size: min(max($rule-height - 9, 8pt), 13pt);
   $rule-mask-height: $rule-height - 1;
   $rule-padding-top: $rule-height + 2;
   $rule-padding-right: $rule-height;
   $rule-padding-left: $rule-height * 2;

// colors
$hole-fill-color: #f5f5f5;
$hole-shadow: #CCCCCC;
$paper-color: #FFFFFF;
$line-color: #E7EFF8;

不幸的是，Stackoverflow不支持SCSS，所以我在這里只包含一個固定配置的快照：

 @import url("https://fonts.googleapis.com/css?family=Reenie+Beanie"); html { height: 100%; } body { background-color: #f5f5f5; } .editable { color: #000000; border: 1px solid #EEEEEE; box-shadow: 1px 1px 0 #DDDDDD; display: inline-block; vertical-align: top; /*font-family: 'Marck Script', cursive;*/ font-family: 'Reenie Beanie', cursive; font-size: 24px; line-height: 20px; margin: 2% auto; padding: 22px 20px 3px 40px; resize: none; min-height: 200px; width: 300px; background-color: #FFFFFF; background-image: -moz-linear-gradient(top, transparent, transparent 19px, #E7EFF8 0px), -moz-radial-gradient(4% 50%, circle closest-corner, #f5f5f5, #f5f5f5 39%, transparent 0%), -moz-radial-gradient(3.9% 46%, circle closest-corner, #CCCCCC, #CCCCCC 43.5%, transparent 0%); background-image: -webkit-linear-gradient(top, transparent, transparent 19px, #E7EFF8 0), -webkit-radial-gradient(4% 50%, circle closest-corner, #f5f5f5, #f5f5f5 39%, transparent 0%), -webkit-radial-gradient(3.9% 46%, circle closest-corner, #CCCCCC, #CCCCCC 43.5%, transparent 0%); -webkit-background-size: 100% 20px; background-size: 100% 20px; } 

 <textarea class="editable">Textarea: This is the first line. See, how the text fits here, also if there is a linebreak at the end? It works nicely. Great. </textarea> <div class="editable" contenteditable>Editable div: This is the first line.<br> See, how the text fits here, also if there is a linebreak at the end?<br> It works nicely.<br> <br> Great. </div>