CSS样式化文本区域，如笔记本外观

Question

CSS样式化文本区域，如笔记本外观

htmlcsstextarea

50

是否可以使文本区域的每一行都有点线下划线（就像笔记本或笔迹块）？

行数应该固定为10行。

- content01

13

只使用背景图片？ - BoltClock

6个回答

45

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

- Alan Souza

7

链接已经失效了，你能否将它上传到其他地方？ - mbdev

2

这就是为什么你不应该使用个人网站来上传示例的原因。我认为JSFiddle更加可靠。 - Tomáš Zato

1

自己动手做一个小测试只需要5秒钟。这是一个包含准确代码的测试：http://jsfiddle.net/Wolfsblvt/qc9rgm7r/ - Wolfsblvt

1

这非常酷！动态行高，无外部文件依赖，没有额外的请求！ - 3k-

1

很棒的解决方案，谢谢！如果你想让行随着文本区域的内容滚动，请添加background-attachment: local。 - Roman Hocke

7

我采用了其他答案的方法，并将其升级为SCSS，以使其可配置。现在，您可以轻松更改孔和规则的大小和颜色，一切都会相应地调整大小。

此外，我添加了另一个示例，它使用可编辑的div而不是textarea。 example

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>

- Benny Bottema

3

这些解决方案不支持textarea溢出。因此，滚动只会滚动文本而不是背景。为了支持滚动，您应该在textarea css中添加“background-attachment: local;”。

- Morten Riis

这是我需要使用的内容，与此处接受的答案一起使用 https://stackoverflow.com/questions/28665159/how-can-i-underline-all-rows-in-textarea - Peter Griffin

2

如果您仍然对这个主题感兴趣，您可以在fivera的博客上查看纸张文本区域示例-仅使用css创建。这个很酷的东西是您可以立即玩弄这些示例。

- George

2

最好不要在回答问题时依赖于链接到另一个网页。你无法确定该链接是否始终可访问。 - AndrewPolland

1

滚动会破坏每个解决方案，一个完整的解决方案应该让文本与行一起滚动。仅通过向文本区域添加背景图像实现这一点是很困难的。

- Pablo Pazos

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Book Of Zeus · Accepted Answer

下面可能是您在寻找的内容：

line

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

或者您可以阅读这篇文章，它告诉您如何从头开始制作：

创建笔记本背景