Textarea横向规则显示在打印上

Question

我目前正在一个网站上工作，用户可以在该网站上查看网站上的客户的机械请求。然后他们可以打印请求。

我正在尝试添加＆＃34;笔记＆＃34;只有印刷版本的请求部分。我正在使用bootstrap，因此将其隐藏起来直到打印很容易。

我的问题是我希望在textarea中有水平线，就像这个答案一样：<textarea> with horizontal rule

这些线条在textarea上运行良好。问题是它们在调用window.print（）

时不会出现

在页面上：

打印时：

有没有办法让这个在印刷版上显示？

<dt class="visible-print">
    Notes
</dt>

<dd class="visible-print">
    <textarea class="notes" rows="10" cols="100"></textarea>
</dd>

.notes {
    background-image: -webkit-linear-gradient(left, white 10px, transparent 10px), -webkit-linear-gradient(right, white 10px, transparent 10px), -webkit-linear-gradient(white 30px, #ccc 30px, #ccc 31px, white 31px);
    background-image: -moz-linear-gradient(left, white 10px, transparent 10px), -moz-linear-gradient(right, white 10px, transparent 10px), -moz-linear-gradient(white 30px, #ccc 30px, #ccc 31px, white 31px);
    background-image: -ms-linear-gradient(left, white 10px, transparent 10px), -ms-linear-gradient(right, white 10px, transparent 10px), -ms-linear-gradient(white 30px, #ccc 30px, #ccc 31px, white 31px);
    background-image: -o-linear-gradient(left, white 10px, transparent 10px), -o-linear-gradient(right, white 10px, transparent 10px), -o-linear-gradient(white 30px, #ccc 30px, #ccc 31px, white 31px);
    background-image: linear-gradient(left, white 10px, transparent 10px), linear-gradient(right, white 10px, transparent 10px), linear-gradient(white 30px, #ccc 30px, #ccc 31px, white 31px);
    background-size: 100% 100%, 100% 100%, 100% 31px;
    border: 1px solid #ccc;
    border-radius: 8px;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
    line-height: 31px;
    font-family: Arial, Helvetica, Sans-serif;
    padding: 8px;
}

Answer 1

大多数人将浏览器设置为默认选项＆＃34;不打印背景。＆＃34;深色背景页面可以快速消耗你的墨水！ 如果你的＆＃34;行＆＃34;实施利用＆＃34;背景，＆＃34;他们不会打印。

作为解决方法，请尝试创建独立图像。适当设置其z-index（记住使用位置），然后将其隐藏在屏幕css中，仅显示打印css。

Answer 2

在类似的情况下报告了<textarea>在打印前的呈现方式。值得关注的解决方案是在调用打印之前/之后将<textarea>复制为标准<div>或其他元素。

可以在此处找到显示如何使用jQuery替换<textarea>的示例的资源：http://www.entwicklungsgedanken.de/2011/02/07/how-to-replace-textarea-tags-with-simple-div-tag-including-it-content-for-a-printing-view/。