Html CSS 样式文本区域，如 notebook-look
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8304436/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
CSS Styling text areas like notebook-look
提问by content01
It is possible to style a text area so each row have a dotted underline (like a notebook or a notes-block)?
是否可以设置文本区域的样式，以便每一行都有一个虚线下划线（如笔记本或笔记块）？
The number of lines should be fixed to lets say 10.
行数应该固定为 10。
回答by Book Of Zeus
Here's probably what you looking for:
这可能是你要找的：
<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>Or you can read this articles that tells you how to do it from scratch:
或者你可以阅读这篇文章，告诉你如何从头开始：
回答by Alan Souza
Pure CSS3
纯 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>
the result you can see this link: http://jsfiddle.net/Wolfsblvt/qc9rgm7r/
结果你可以看到这个链接：http: //jsfiddle.net/Wolfsblvt/qc9rgm7r/
回答by Morten Riis
These solutions don't support overflowing textarea. So scrolling only scroll the text not the background. To support scrolling, you should add “background-attachment: local;” to the textarea css.
这些解决方案不支持溢出的 textarea。所以滚动只滚动文本而不是背景。为了支持滚动，你应该添加“ background-attachment:local; ” 到 textarea css。
回答by Benny Bottema
I took the other answerand upgraded it to SCSS to make it configurable. You can now easily change size and color of the holes and rules and everything will size accordingly.
我接受了另一个答案并将其升级到 SCSS 以使其可配置。您现在可以轻松更改孔和规则的大小和颜色，所有内容都会相应地调整大小。
Also, I added another example that uses an editable div instead of a textarea.
此外，我添加了另一个使用可编辑 div 而不是 textarea 的示例。
// 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;
Unfortunately, Stackoverflow doesn't support SCSS, so I just included a snapshot of one fixed configuration here:
不幸的是，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>回答by George
If you are still interested in this topic you can check the Paper text Area examples - created with css onlyon fivera's blog. Cool thing about it is that you can play with the examples on the spot.
如果您仍然对此主题感兴趣，您可以查看Fivera 博客上的Paper text Area examples - created with css only。很酷的一点是，您可以在现场使用示例。
回答by Pablo Pazos
Scroll breaks every solution, a complete solution for this should also make lines scroll with text. This is difficult to accomplish just by adding a background image to a textarea.
滚动打破了每一个解决方案，一个完整的解决方案也应该使行随文本滚动。仅通过将背景图像添加到 textarea 很难实现这一点。
