某些HTML表单元素附加了额外的UI，如数字上/下箭头。然而，当打印页面时，不再需要这些按钮，因为用户不能以打印形式与它们进行交互。
文本框很容易处理：
@media print {
input {
border: none;
border-bottom: 2px solid #000000;
}
}
使它们打印相当不错，作为一行与文本上。就像一个表单将手工填写。但是，像数字一样输入的输入将使您失去上升/下降的箭头：
有没有办法解决这个问题？任何方式来将该部分的元素设置为不可见，但仍然看到值/文本？
我意识到可以用JS替换type =“”属性，或者有另一个元素保存要在打印上显示的值，但是如果有一个只能用CSS完成的解决方案，那将是优越的。
解决方法
您可以尝试隐藏具有
CSS selectors的特定元素
@media print {
input[type=range] {
display: none;
}
}
然而，要隐藏数字元素中的箭头，或许您可以尝试放置2个元素，1个文本和1个数字，然后在屏幕模式下显示该数字，而文本被隐藏，反之亦然。
@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;
}
}
可以为其他表单元素做类似的事情。如果您可以使用此方法，将取决于您的实现。
