Textarea with horizontal rule showing up on print

问题

I am currently working on a website where a user can look at a mechanical request by a customer on the site. They can then print the request.

I am trying to add a "notes" section to the request only on the printed version. I am using bootstrap, so hiding it until print is easy.

My problem is that I want to have horizontal lines in the textarea, exactly like this answer: <textarea> with horizontal rule

The lines work great on the the textarea. The problem is that they do not show up when calling window.print()

On the page:

When printing:

Is there a way to make this show up on the print version?

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

回答1:

Most folks have their browsers set to the default option "do not print backgrounds." A dark-background page can eat up your ink fast! If your "lines" are implemented leveraging "background," they won't print.

As a workaround, try creating an independent image. Set its z-index appropriately (remember to use position), and then hide it from the screen css, showing it only for the print css.

回答2:

This has been reported in similar situations with how the <textarea> gets rendered before printing. A solution worth looking at is to duplicate the <textarea> as a standard <div> or other element before/when calling for printing.

A resource showing an example of how to go about replacing a <textarea> using jQuery can be found here: http://www.entwicklungsgedanken.de/2011/02/07/how-to-replace-textarea-tags-with-simple-div-tag-including-it-content-for-a-printing-view/.

来源：https://stackoverflow.com/questions/36115762/textarea-with-horizontal-rule-showing-up-on-print

标签

html

css

printing

textarea