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

Question

我有一个桌子,里面有一些<input type="text">盒子,我希望这些在打印时显示为普通文本.我已经设置了一个media ="print"样式表

input
{
border-style: none;
}

在它,这删除边框,所以内容看起来像文本,但输入仍然将列的宽度推到其实际宽度(不出意料),所以我得到不必要的空格和列宽.是否有一种时髦的方式以某种方式使用CSS将输入的宽度设置为其内容大小,或其他一些方法来解决这个问题？

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

我很确定这不可能做到,但我想我会问.

Answer 1

不,我不认为没有一些脚本可以做到这一点.但是使用像Jquery这样的框架可以很容易地实现脚本编写:

• 对于每个输入元素,您将在其<span>旁边创建一个并为其提供一个隐藏在media="screen"样式表中且可见的类media="print".

• 输入元素本身将获得一个反过来,可见screen并隐藏的类print.

• 每个输入元素都会获得change更新邻居的事件span.

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

我敢打赌,如果你重新标记问题或者问一个新问题,我们的常驻JQuery大师之一会看一看:)

Answer 2

如果您使用的是引导程序：

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

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