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.