我有一个表格，里面有一些 <input type="text"> 框，我希望这些在打印时显示为普通文本。我已经用
input
{
border-style: none;
}
在其中，这会删除边框，因此内容看起来像文本，但输入仍在将列的宽度推到其实际宽度（不足为奇），所以我得到了不必要的空白空间和列宽。有没有一种时髦的方法可以使用 CSS 将输入的宽度设置为其内容大小，或者使用其他方法来解决这个问题？
另一个论坛上的某个人建议使用打印按钮来创建客户端脚本以物理更改页面标记，但不幸的是，由于页面的复杂性和动态特性，这并不实用。
我很确定这不能完成，但我想我会问。
【问题讨论】：
overflow: visible 上的输入在 IE6/7 中工作由于错误（！！）。
标签： css media-queries
对于引导程序，这对我有用。 它基于 user5712635 的回答，但我添加了外观属性以摆脱选择输入上的向下箭头。
@media print {
.form-control
{
border: 0;
padding:0;
overflow:visible;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
}
【讨论】：
要在 CSS 打印部分定义输入字段的宽度，请使用：
width: ?cm
对应的输入元素。
在 Firefox 中测试；也许它在以前版本的浏览器中不起作用。
【讨论】：
如果您使用的是 Bootstrap：
@media print {
.no-print {
display: none !important;
}
.form-control
{
border: 0;
padding:0;
overflow:visible;
}
}
【讨论】：
我正在使用 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 环境中执行类似的操作。
无需编写脚本。
【讨论】：
input { border-style: none; display: inline}
【讨论】：
我在搜索有关如何设置表单样式和其他一些内容的信息时遇到了这个问题。
在弄乱了一些 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; }
像魅力一样工作 =>
希望对你有帮助
【讨论】：
border: 0; 完成了同样的事情！
不，我认为没有脚本就无法做到这一点。但是使用 Jquery 这样的框架很容易实现脚本：
对于每个输入元素，您将在其旁边创建一个<span>，并为其提供一个隐藏在media="screen" 样式表中并在media="print" 中可见的类。
输入元素本身会得到一个相反的类，在screen中可见，在print中隐藏。
每个输入元素都会收到一个change 事件，该事件会更新相邻的span。
我还没有 JQuery 例程来把它从我的袖子里拿出来，现在还没有时间把它放在一起，但它绝对是可以解决的，而且仍然相当不显眼——当用户使用时不需要执行任何脚本开始打印。
我敢打赌，如果您重新标记问题或提出新问题，我们的一位常驻 JQuery 专家会看看它 :)
【讨论】：
border: 0; 不起作用的情况。试一试！