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>