我有一张桌子，里面有一些<input type="text">盒子，我希望这些在打印时显示为普通文本。我已经设置了一个 media="print" 样式表
input
{
border-style: none;
}
在其中，这会删除边框，因此内容看起来就像文本，但是输入仍在将列的宽度推到其实际宽度（不足为奇），因此我得到了不必要的空白空间和列宽。有没有一种时髦的方法可以使用 CSS 将输入的宽度设置为其内容大小，或者使用其他方法来解决这个问题？
另一个论坛上的某个人建议使用打印按钮来创建客户端脚本来物理更改页面标记，但不幸的是，由于页面的复杂性和动态性，这并不实用。
我很确定这不能完成，但我想我会问。
不，我认为没有一些脚本就无法做到这一点。但是使用像 Jquery 这样的框架很容易实现脚本：
对于每个输入元素，您将在它旁边创建一个<span>并给它一个隐藏在media="screen"样式表中的类，并在media="print".
输入元素本身将获得一个反之亦然的类，在 中可见screen和隐藏在 中print。
每个输入元素都会收到一个change更新相邻元素的事件span。
我还没有 JQuery 例程来把它从我的袖子里拿出来，现在还没有时间把它放在一起，但它绝对是可以解决的，而且仍然相当不引人注目——当用户开始打印时不需要执行任何脚本。
我敢打赌，如果您重新标记问题或提出新问题，我们的一位常驻 JQuery 专家会看看它 :)
如果您使用的是引导程序：
@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 并且遇到了同样的问题。
我通过添加一个与我的文本框相对应的标签来解决它，并设置了两个类：
在@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 中测试；也许它在以前版本的浏览器中不起作用。
对于引导程序，这对我有用。它基于 user5712635s 答案，但我添加了外观属性以摆脱选择输入上的向下箭头。
@media print {
.form-control
{
border: 0;
padding:0;
overflow:visible;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
}