CODEWITHSUNDEEP
htmlcss
Wannabe
Wannabe

Reputation: 596

Apply CSS to printed links

I have some links that are in black text. Based on what the user selects in a drop down, I apply the below CSS to change matching links. If the user then selects to print the view they are looking those same links print out in black text. How can I get the CSS to carry over to a printed view so the user sees the same color printed as they see on the screen? 

$this.find('a').css("color", "#bfbfbf");
$this.find('.fa-play').css("color", "#bfbfbf");
$this.find('.fa-check-circle').css("color", "#bfbfbf");

Upvotes: 0

Views: 54

Answers (1)

TamirNahum
TamirNahum

Reputation: 484

The following code will affect the CSS of any element inside while being in print mode:

@media print {
   span {
      color: black;
   }
}

in the above example, any span's color will be black on print mode.

Edit: 28 Oct 2017 Based on comments @TamirNahum suggested, I have figured this out. Below is the complete answer.

The jQuery .addClass will inject the class 'tailoredLink' into the each element that matches the dropdown selection.

$this.find('a').css("color", "#bfbfbf").addClass("tailoredLink");
$this.find('.fa-play').css("color", "#bfbfbf").addClass("tailoredLink");
$this.find('.fa-check-circle').css("color", "#bfbfbf").addClass("tailoredLink");

Then when the user chooses to print the page, the following CSS will show the "Tailored Links" in gray.

@media print {
   .tailoredLink{
      color: gray;
   }
}

Upvotes: 1

Related Questions