使用CSS打印HTML页面时隐藏表单控件 [英] Hide form controls when printing an HTML page with CSS

问题描述

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

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 the user can not interact with them in print form.

文本框很容易处理： p>

Text boxes are easy to deal with:

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

使它们打印得相当不错，在上面。就像一个表格一手将填写。但是，对于 number 这样的输入做同样的事情，会留下那些令人讨厌的向上/向下箭头：

Makes them print quite nicely, as a line with text on it. Just like a form one would fill out by hand. However doing the same for inputs like number leaves you with those nasty up/down arrows:

那么有更少的有用的打印输出，如 range ，这意味着在页面上没有任何东西：

And then there are even less useful printouts, like range, which means nothing when on a page:

任何方式来解决这个问题？任何方式将元素的部分风格看不见，但仍然看到值/文本？

Is there any way to get around this? Any way to style that portion of the element to be invisible, but still see the value/text?

我意识到可以换出类型=属性与JS，或有另一个元素保存的值显示在打印，但如果有一个解决方案只能用CSS做，这将是优越的。

I realize one could swap out the type="" attribute with JS, or have another element holding the value to be displayed on print, but if there is a solution that can be done with CSS only, that would be superior.

推荐答案

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

This effect can be achieved in webkit browsers. I still can not find a way to do it in others, but it will work for webkit.

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

Webkit实际上将这些按钮视为伪元素原因），并提供了隐藏它们的方法。这正是我们想要的那种行为，虽然只限于webkit有点恼人。

Webkit actually treats those buttons as pseudo elements (with good reason) and provides a way to hide them. This is exactly the kind of behavior one would want, though being limited to just webkit is a bit annoying.

这篇关于使用CSS打印HTML页面时隐藏表单控件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！