使用CSS打印HTML页面时隐藏表单控件

某些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;
    }
}

可以为其他表单元素做类似的事情。如果您可以使用此方法，将取决于您的实现。

原文地址：https://www.jb51.cc/css/219073.html