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