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

【问题标题】：Hide form controls when printing an HTML page with CSS使用 CSS 打印 HTML 页面时隐藏表单控件
【发布时间】：2013-04-29 05:25:59
【问题描述】：

某些 HTML 表单元素附加了额外的 UI，例如 number 上的向上/向下箭头。然而，在打印页面时，不再需要这些按钮，因为用户无法在打印表单中与它们进行交互。

文本框很容易处理：

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

使它们打印得非常好，就像一行带有文本的行。就像一个人会用手填写的表格一样。然而，对number 之类的输入执行相同操作会留下那些讨厌的向上/向下箭头：

还有更没用的打印输出，比如range，在页面上没有任何意义：

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

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

【问题讨论】：

这不是问题，我不想隐藏元素，我想隐藏附加到某些类型的 input 元素的无关 UI，这些在打印时毫无意义。隐藏其自身的元素也会隐藏其值/文本，这很重要。
不，是浏览器提供的位使不同类型的input 有用，超出了简单的text 框所能做的。正如我所提到的，number 类型使用一对向上/向下按钮来增加/减少值。然而，这些按钮不是 HTML 按钮，它们是由浏览器为特定类型的input 提供的。因此，隐藏它们并不困难。因此问题。
你可以试试 webkit 技巧，但要注意如果其他浏览器实现了 HTML5 控件，你将不得不更新你的代码stackoverflow.com/questions/3790935/…
@torm 也许 OP 确实想在 在浏览器中 使用 HTML5 输入功能。当打印页面并且那些表单控件变得无用时，问题就出现了。你误解了这里的问题
这里的用例是什么？如果它是表单提交的可打印报告，我不会费心尝试使表单元素打印友好，而是为用户提供打印优化的结果页面。

标签： html css forms

【解决方案1】：

更好的解决方案是使用output element，因为它不使用供应商前缀。

原则

在@media screen 上隐藏output 元素；
更新字段输入中output 元素的值；
在@media print 上切换input 和output 元素的可见性。

→codepen available here.

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

【讨论】：

这与其他答案相同，您只是使用了不同的（更语义化，但最终不再有用）元素。目标是在不实际更改内容的情况下更改页面的外观。
我根本没有使用供应商前缀，而是使用标准 CSS，正如您所说，它更具语义性。这确实不是一个纯粹的 CSS 答案，但了解 output 可能有助于其他形式的场景。

【解决方案2】：

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

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

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

【讨论】：

如果有人在其他浏览器中找到了方法，请评论/编辑。

【解决方案3】：

您可以尝试使用CSS selectors隐藏特定元素

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

但是，要隐藏 number 元素中的箭头，也许您可以尝试放置 2 个元素，1 text 和 1 number，然后在屏幕模式下显示 number，而text 被隐藏，在打印模式下反之亦然

@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;
    }
}

可以对其他表单元素执行类似的操作。是否可以使用此方法将取决于您的实现。

【讨论】：

与其他答案一样，这要求text 框不断更新为number 的值。据我所知，这总是需要 JS。

【解决方案4】：

另一种方法是提供一个链接进行打印，并拥有另一个页面副本，而不需要所有额外的东西

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

这是最常见的做法（另外，您可以重复使用其中包含仅打印部分的 css）

希望对你有帮助

【讨论】：

然后我需要将信息提交到服务器，并让它处理它，并返回打印友好页面。这需要有一个可用的网络服务器。
不一定。你可以从这里添加一个按钮printfriendly.com/button
你也可以使用同一个页面但是有两个 css 页面 --> 在这里阅读更多 stackoverflow.com/questions/46718/…

【解决方案5】：

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

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

用hideOnScreen类影响文本以及类hideOnPrint的输入

【讨论】：

这没有回答我提出的问题。
我正在寻找使用 CSS 修复 inputs 的显示行为的解决方案。隐藏文本需要 JavaScript，这不是我想要的。
你不需要javascript来隐藏文本，你可以用display:none;用css隐藏它我不知道如何用css修复输入的显示行为。祝你好运
隐藏文本不会显示输入的值，除非我用 JS 更新它。

【解决方案6】：

也许您应该使用简单的 javascript 来仅获取相关字段的值，在打印操作时，更改为可打印格式，执行打印并将其更改回正常状态？

真的不知道仅使用 CSS 是否可行。

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

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

【讨论】：

问题是。 . . Javascript。