Question

我有一个表格中有一些<input type="text">个框，我希望它们在打印时显示为普通文本。我已经设置了带有

的media =“print”样式表

input
{
border-style: none;
}

在其中，这将删除边框，因此内容看起来像文本，但输入仍然将列的宽度推到其实际宽度（不足为奇），因此我得到不必要的空白空间和列宽。是否有一种时髦的方式以某种方式使用CSS将输入的宽度设置为其内容大小，或者其他一些方法来解决这个问题？

另一个论坛上有人建议使用打印按钮来创建客户端脚本来物理地更改页面标记，但遗憾的是，由于页面的复杂性和动态性，这并不实用。

我很确定无法做到这一点，但我想我会问。

Answer 1

不，我不认为没有一些脚本可以做到这一点。但是使用像Jquery这样的框架来实现脚本很容易实现：

对于每个输入元素，您可以在其旁边创建一个<span>，并为其指定一个隐藏在media="screen"样式表中的类，并在media="print"中显示。
输入元素本身将获得一个反过来的类，在screen中可见并隐藏在print中。
每个输入元素都会获得更新邻居change的{{1}}事件。

我还没有将JQuery例程从我的袖子中拉出来，而不是现在把它放在一起的时间，但它绝对可以解决并且仍然非常不引人注目 - 当用户不需要执行任何脚本开始打印。

我敢打赌，如果你重新标记这个问题或者问一个新问题，我们的常驻JQuery专家会看一下：）

Answer 2

如果您使用的是Bootstrap：

@media print {
  .no-print {
    display: none !important;
  }

  .form-control
  {
    border: 0;
    padding:0;
    overflow:visible;
  }
}

Answer 3

我遇到了这个搜索有关如何设置表单样式和其他一些内容的信息。

在搞乱了一些CSS后，我想出了一个适合我的CSS方法。

我的表单都具有涉及彩色背景和黑色边框的样式。

在我的打印CSS文件中，我复制了我的表单css，并将所有颜色（不是文本本身）更改为白色。换句话说，它隐藏了我的文本框并仅显示文本。

原始CSS - #form textarea，＃form input，＃form select {border：1px solid #ddd;颜色：＃313131; }

打印CSS - #form textarea，＃form input，＃form select {border：1px solid #fff;颜色：#FFF; }

像魅力一样工作=＆gt;

希望这有助于

Answer 4

input { border-style: none; display: inline}

Answer 5

我正在使用ASP.NET并遇到同样的问题。

我通过添加与我的Textbox对应的Label来解决它，并设置了两个类：

在@media屏幕中：

.hdnPrint {visibility:visible;display:block;}
.visPrint {visibility:hidden;display:none;}

在@media print：

.hdnPrint {visibility:hidden;display:none;}
.visPrint {visibility:visible;display:block;}

对于文本框，我分配了hdnPrint类，在标签上，我分配了visPrint类。当用户打印表单时，将显示标签并隐藏表单域。

我假设你可以通过遵循相同的模式在非ASP.NET环境中做类似的事情。

无需编写脚本。

Answer 6

要在CSS打印部分中定义输入字段的宽度，请使用：

width: ?cm

表示相应的输入元素。

在Firefox中测试;也许它不适用于以前版本的浏览器。

Answer 7

对于引导程序，这对我有用。它基于user5712635的答案，但我添加了外观属性以摆脱选择输入上的向下箭头。

@media print {    
  .form-control
  {
    border: 0;
    padding:0;
    overflow:visible;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
  }
}

打印样式表 - 将输入转换为文本

7 个答案: