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

前端之家收集整理的这篇文章主要介绍了使用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.f2er.com/css/219073.html

猜你在找的CSS相关文章