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

Maybe you should use a simple javascript to get only the values of the concerned fields, on print action, change to a printable format, perform the print and change it right back to normal?

Really don't know if doable using only CSS.

You might want to consider using XML parsing mechanism. This is a really convenient method for such tasks.

http://webdesign.about.com/od/xslt/a/xslt-tutorial-1.htm

Answer 2

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

<form onsubmit="return false" oninput="print.value = parseInt(screen.value)">
  <input class='screen' name="screen" type="number" value='0'> →
  <output class='print' name="print">5 (default print value)</output>
</form>
<p>The <code>output</code> element replace the <code>input</code> on print media</p>

CSS

.print {
  display: none;
}

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

Answer 3

You can try to hide specific elements with CSS selectors

@media print {
    input[type=range] {
        display: none;
    }
}

However, to hide the arrows in a number element, perhaps you could try to put 2 elements instead, 1 text and 1 number, and then display the number when in screen mode, while the text is hidden, and vice-versa in print mode

@media print {
    input[type=text] {
        display: inline-block;
        border:none;
        border-bottom:2px solid #000;
        etc..
    }
    input[type=number] {
        display: none;
    }
}
@media screen {
    input[type=number] {
        display: inline-block;
    }
    input[type=text] {
        display: none;
    }
}

Something similar can be done for other form elements. It will depend on your implementation if you can use this method.

Answer 4

try to use a hidden test on screen and then show it on print

@media print {
    .hideOnprint {
        display: none;
    }
    .hideOnScreen {
        display: block;
    }
}
@media screen {
    .hideOnprint {
        display: block;
    }
    .hideOnScreen {
        display: none;
    }
}

affect the text with the class hideOnScreen and the input with the class hideOnPrint

Answer 5

This effect can be achieved in webkit browsers. I still can not find a way to do it in others, but it will work for webkit.

@media print {
    input::-webkit-outer-spin-button,  
        input::-webkit-inner-spin-button {
        -webkit-appearance: none;
    }
}

Webkit actually treats those buttons as pseudo elements (with good reason) and provides a way to hide them. This is exactly the kind of behavior one would want, though being limited to just webkit is a bit annoying.

Answer 6

An alternative would be to provide a link to print, and have another copy of the page without all the extra stuff

ie:        www.something.com/page.htm
printpage  www.something.com/page-print.htm

this is the most common practice (also, you can reuse css with the print only parts in it)

hope that helps