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

Question

某些HTML表单元素附加了额外的UI,如上/下箭头number.然而,当打印页面时,不再需要那些按钮,因为用户不能以打印形式与它们交互.

文本框很容易处理:

@media print {
    input {
        border: none;
        border-bottom: 2px solid #000000;
    }
}

使它们打印得非常好,作为带有文本的线条.就像一个表格一样可以手工填写.然而,对于像number你那些令人讨厌的向上/向下箭头那样的输入做同样的事情:

">

然后有更少有用的打印输出,例如range,在页面上没有任何意义:

有没有办法解决这个问题？任何方式将元素的该部分设置为不可见,但仍然可以看到值/文本？

我意识到可以type=""用JS 替换属性,或者让另一个元素保持在打印时显示的值,但是如果有一个只能用CSS完成的解决方案,那就更好了.

Answer 1

这种效果可以在webkit浏览器中实现。我仍然找不到在其他人身上做到这一点的方法，但它适用于 webkit。

@media print {
    input::-webkit-outer-spin-button,  
        input::-webkit-inner-spin-button {
        -webkit-appearance: none;
    }
}

Webkit 实际上将这些按钮视为伪元素（有充分的理由）并提供了一种隐藏它们的方法。这正是人们想要的行为，尽管仅限于 webkit 有点烦人。