Bootstrap Print Overrides CSS

Question

As already discussed here: Background color not showing in print preview

I haven't figured out yet, how to get my actual text coloring. I want to get a div only shown on print with the Bootstrap class print-visible, works fine but all the coloring is lost in the preview.

JsFiddle

@media print {
  .test {
    background-color: #1a4567 !important;
    -webkit-print-color-adjust: exact; 
  }
}

If I add the media print CSS it does what it should, but I want the text-colors not the color set by CSS.

Answer 1

Edited based on comment:

You can add !important using JavaScript's style.setProperty() method in 2 ways:

1. Pure JS: document.getElementById() .
2. jQuery hybrid: Wrap it inside jQuery's .each() .

Both examples below:

 $('#filePrintPreview').html("TEST"); //way 1: pure JS exmple document.getElementById('filePrintPreview').style.setProperty('color', 'red', 'important'); //way 2: wrapped inside jQuery's each() example $('h3').each(function() { this.style.setProperty('color', '#12FF12', 'important'); });

 @media print { .test { background-color: #1a4567 !important; -webkit-print-color-adjust: exact; } }

 <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="col-md-12 test"> <h3>Heading</h3> <div class="box no-border shadow" id="filePrintPreview" style="padding: 2px; word-wrap: break-word; overflow-wrap: break-word; white-space: pre-line;"> </div> </div> <button class="btn btn-flat btn-primary btn-sm" style="margin-top:15px;" onclick=" window.print();">Print </button>