启用段落的背景色<p>当有一个带有CSS的引导按钮时

下面的fiddle允许动态创建段落，并更改每个段落<p>的背景颜色和样式。

---

在下面的小提琴中，是否有可能仍然允许打印而不删除每个动态创建的段落<p>后面的背景色。

问题是，当试图打印时，每个段落部分的背景颜色都被删除了引导CSS。

附件是Fiddle

一个更新的Fiddle将非常感谢，因为我仍然是编码的新手。

谢谢！

HTML:

<div>
<div id="styles">
    <label>Color:
        <select data-property="color">
            <option disabled>Select color:</option>
            <option>red</option>
            <option>green</option>
            <option>blue</option>
        </select>
    </label>
    <label>Font-size:
        <select data-property="font-size">
            <option disabled>Select font-size:</option>
            <option>smaller</option>
            <option>10px</option>
            <option>12px</option>
            <option>14px</option>
            <option>16px</option>
            <option>18px</option>
            <option>20px</option>
            <option>larger</option>
        </select>
    </label>
    <label>Background-color:
        <select data-property="background-color">
            <option disabled>Select background-color:</option>
            <option>aqua</option>
            <option>fuchsia</option>
            <option>limegreen</option>
            <option>silver</option>
        </select>
    </label>
</div>
<div id="text_land">xzxz</div>
<textarea></textarea>
<button>Go</button>

JQuery:

$(function () {
$('button').on('click', function () {
    var v = $('#text_land + textarea').val(),
        paragraphs = '<p>' + v.split(/'n'n/).join('</p><p>') + '</p>';
    $(paragraphs).appendTo('#text_land');
});
$('select').on('change', function () {
    var targets = $('#text_land p'),
        property = this.dataset.property;
    targets.css(property, this.value);
}).prop('selectedIndex', 0);
});

$('select').each(function() {
    var $this = $(this);
    paragraphs.css($this.data('property'), $this.val());
});