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 the user can not interact with them in print form.

Text boxes are easy to deal with:

@media print {
    input {
        border: none;
        border-bottom: 2px solid #000000;
    }
}

Makes them print quite nicely, as a line with text on it. Just like a form one would fill out by hand. However doing the same for inputs like number leaves you with those nasty up/down arrows:

And then there are even less useful printouts, like range, which means nothing when on a page:

Is there any way to get around this? Any way to style that portion of the element to be invisible, but still see the value/text?

I realize one could swap out the type="" attribute with JS, or have another element holding the value to be displayed on print, but if there is a solution that can be done with CSS only, that would be superior.

Answer 1

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 2

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 3

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 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

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 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