Hide form controls when printing an HTML page with CSS

Question

Certain HTML form elements have extra UI attached to them, like the up/down arrows on number. When printing the page however, those buttons are no longer needed, as

Answer 1

A better solution, as it doesn't use vendor prefix, will be to use the output element.

Principles

1. hide output element on @media screen ;
2. update the value of the output element on field input ;
3. toggle visibility of the input and the output element on @media print.

→ codepen available here.

HTML

   →
  
5 (default print value)

The output element replace the input on print media

CSS

.print {
  display: none;
}

@media print {
  .screen {
    display: none;
  }
  .print {
    display: inline-block;
  }
}