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

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