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

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.

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

Text boxes are easy to deal with:

文本框很容易处理：

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

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:

使它们打印得非常好，作为带有文本的线条。就像表格一样，手工填写。但是对于像数字这样的输入做同样的事情会让你产生那些令人讨厌的向上/向下箭头：

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?

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

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.

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

6 个解决方案

#1

You can try to hide specific elements with CSS selectors

您可以尝试使用CSS选择器隐藏特定元素

@media print {
    input[type=range] {
        display: none;
    }
}

However, to hide the arrows in a number element, perhaps you could try to put 2 elements instead, 1 text and 1 number, and then display the number when in screen mode, while the text is hidden, and vice-versa in print mode

但是，要隐藏数字元素中的箭头，也许您可​​以尝试放置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;
    }
}

Something similar can be done for other form elements. It will depend on your implementation if you can use this method.

可以为其他表单元素执行类似的操作。如果您可以使用此方法，这将取决于您的实现。

#2

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.

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

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

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.

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

#3

try to use a hidden test on screen and then show it on print

尝试在屏幕上使用隐藏测试，然后在打印时显示它

@media print {
    .hideOnprint {
        display: none;
    }
    .hideOnScreen {
        display: block;
    }
}
@media screen {
    .hideOnprint {
        display: block;
    }
    .hideOnScreen {
        display: none;
    }
}

affect the text with the class hideOnScreen and the input with the class hideOnPrint

使用类hideOnScreen和带有hideOnPrint类的输入来影响文本

#4

A better solution, as it doesn't use vendor prefix, will be to use the output element.

更好的解决方案是使用输出元素，因为它不使用供应商前缀。

Principles

1. hide output element on @media screen ;
2. 在@media屏幕上隐藏输出元素;
3. update the value of the output element on field input ;
4. 更新字段输入的输出元素的值;
5. toggle visibility of the input and the output element on @media print.
6. 在@media print上切换输入和输出元素的可见性。

→ codepen available here.

→此处提供codepen。

HTML

<form onsubmit="return false" oninput="print.value = parseInt(screen.value)">
  <input class='screen' name="screen" type="number" value='0'> →
  <output class='print' name="print">5 (default print value)</output>
</form>
<p>The <code>output</code> element replace the <code>input</code> on print media</p>

CSS

.print {
  display: none;
}

@media print {
  .screen {
    display: none;
  }
  .print {
    display: inline-block;
  }
}

#5

Maybe you should use a simple javascript to get only the values of the concerned fields, on print action, change to a printable format, perform the print and change it right back to normal?

也许你应该使用一个简单的javascript来获取相关字段的值，打印操作，更改为可打印格式，执行打印并将其恢复正常？

Really don't know if doable using only CSS.

真的不知道是否只使用CSS。

You might want to consider using XML parsing mechanism. This is a really convenient method for such tasks.

您可能需要考虑使用XML解析机制。对于此类任务，这是一种非常方便的方法。

http://webdesign.about.com/od/xslt/a/xslt-tutorial-1.htm

http://webdesign.about.com/od/xslt/a/xslt-tutorial-1.htm

#6

An alternative would be to provide a link to print, and have another copy of the page without all the extra stuff

另一种方法是提供一个打印链接，并在没有所有额外内容的情况下拥有该页面的另一个副本

ie:        www.something.com/page.htm
printpage  www.something.com/page-print.htm

this is the most common practice (also, you can reuse css with the print only parts in it)

这是最常见的做法（另外，你可以重复使用css，只有打印部分）

hope that helps

希望有所帮助