CSS Styling tips for Print

Add CSS for Print

Method 1 : Add a specific styling sheet for Print.

On your theme (THEME.info.yml for D8 and THEME.info for D7), Add css file as [print].

Example

stylesheets[print][] = css/print.css

Method 1. In Same style sheet.

Wrap codes for print using @media query.

Example:

@media print

{

  /*Codes For Print*/

}

Tips:

Remove the URL and SRC from print css (Hide address)

  a[href]:after { content: none !important; }

  img[src]:after { content: none !important; }

Add Print Button (Or image)

Example:

<img src="print.png" alt="Print" onclick="window.print()">

<button onclick="window.print()">Print</button>

Remove / Replace the html "Select" (selectbox's) dropdown arrow

  select {

    //Remove default arrow

    appearance: none;

    -moz-appearance: none;

    -webkit-appearance: none;

    &::-ms-expand {

      display: none;

    }

    //Replace with an image

    background-repeat: no-repeat;

    background-image: url("/path_to/selecebox_arrow.png");

    background-position: right;

  }