我有一张桌子有一些 <input type="text"> 其中的框，我希望这些在打印时显示为普通文本。我已经设置了一个media =“print”样式表
input
{
border-style: none;
}
在它，这删除了边框，所以内容看起来像文本，但输入仍然将列的宽度推到其实际宽度（不奇怪），所以我得到不必要的空格和列宽。是否有一种时髦的方式以某种方式使用CSS将输入的宽度设置为其内容大小，或其他一些方法来解决这个问题？
另一个论坛上有人建议使用打印按钮来创建客户端脚本来物理地更改页面标记，但遗憾的是，由于页面的复杂性和动态性，这并不实际。
我很确定这不可能，但我想我会问。
不，我不认为没有一些脚本可以做到这一点。但是使用像Jquery这样的框架很容易实现脚本编写：
对于每个输入元素，您将创建一个 <span> 在它旁边并给它一个隐藏在其中的类 media="screen" 样式表，可见 media="print"。
输入元素本身会得到一个反过来的类，可见 screen 并隐藏在 print。
每个输入元素都会得到一个 change 更新邻居的事件 span。
我还没有将JQuery例程从我的袖子中拉出来，而不是现在把它放在一起，但它绝对可以解决，而且仍然非常不显眼 - 当用户开始打印时不需要执行任何脚本。
我敢打赌，如果你重新标记问题或者问一个新问题，我们的常驻JQuery大师之一会看看它:)
如果您使用的是Bootstrap：
@media print {
.no-print {
display: none !important;
}
.form-control
{
border: 0;
padding:0;
overflow:visible;
}
}
我遇到了这个搜索有关如何设置表单样式和其他一些内容的信息。
在搞乱了一些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; }
像魅力一样工作=>
希望这可以帮助
input { border-style: none; display: inline}
我正在使用ASP.NET并遇到同样的问题。
我通过添加一个与我的Textbox对应的Label来解决它，并设置了两个类：
在@media屏幕中：
.hdnPrint {visibility:visible;display:block;}
.visPrint {visibility:hidden;display:none;}
在@media打印：
.hdnPrint {visibility:hidden;display:none;}
.visPrint {visibility:visible;display:block;}
对于文本框，我分配了hdnPrint类，在标签上，我分配了visPrint类。当用户打印表单时，将显示标签并隐藏表单域。
我假设你可以通过遵循相同的模式在非ASP.NET环境中做类似的事情。
无需编写脚本。
要在CSS打印部分中定义输入字段的宽度，请使用：
width: ?cm
对于相应的输入元素。
在Firefox中测试;也许它不适用于以前版本的浏览器。