代码之家 › 专栏 › 技术社区 › Mad Halfling

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

media-queries css

Mad Halfling · 技术社区 · 15 年前

我有一张桌子 <input type="text"> 其中的框,我希望这些框在打印时显示为普通文本。我设置了一个media=“print”样式表

input
{
border-style: none;
}

在它中,这将删除边框,使内容看起来像文本,但输入仍然将列的宽度推到实际宽度(这并不奇怪),因此我得到了不必要的空白空间和列宽。有没有一种奇怪的方法可以用CSS将输入的宽度设置为其内容大小,或者用其他方法来解决这个问题?

另一个论坛上的一些人建议使用打印按钮来创建客户端脚本,以物理方式更改页面标记,但不幸的是,由于页面的复杂性和动态性,这并不是真正可行的。

我很确定这不可能,但我想我会问的。

6 回复 | 直到 9 年前

Pekka 15 年前

不,我不认为没有脚本就可以完成。但是使用jquery这样的框架很容易实现脚本编写:

我还没有jquery程序来把它从我的袖子里拔出来,现在也没有时间把它放在一起,但是它肯定是可以解决的,而且仍然相当不引人注目-当用户开始打印时,不需要执行任何脚本。

我敢打赌,如果你重新标记这个问题或者问一个新的问题,我们的一位常驻jquery专家会看一看。

user5712635 9 年前

如果使用引导程序:

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

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

L84 14 年前

我在搜索如何设置窗体样式的信息和其他一些信息时遇到了这个问题。

在处理了一些CSS之后,我想出了一个只适用于CSS的方法。

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

在我的打印css文件中,我复制了表单css,并将所有颜色(而不是文本本身)更改为白色。换句话说,它隐藏了我的文本框,只显示文本。

原始CSS-表单文本区域,表单输入,表单选择边框:1px纯色ddd;颜色:313131;

打印CSS-窗体文本区域,窗体输入,窗体选择边框:1px纯色fff;颜色:fff;

像魅力一样工作=>

希望这有帮助

skynet 13 年前

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

Tim 11 年前

我使用的是ASP.NET,有同样的问题。

我通过添加与我的文本框相对应的标签解决了这个问题,并设置了两个类:

在@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环境中执行类似的操作。

不需要脚本。

tom redfern 9 年前

要定义CSS打印部分中输入字段的宽度,请使用:

width: ?cm

对应的输入元素。

在火狐中测试过;可能它在以前版本的浏览器中不起作用。