在打印样式表中隐藏输入边框（chrome）
Posted
技术标签:
【中文标题】在打印样式表中隐藏输入边框（chrome）【英文标题】：Hiding input borders in print stylesheet (chrome) 【发布时间】：2015-01-03 17:57:21 【问题描述】：我有一个表单，打印时应该显示为纯文本，即输入和文本区域应该没有边框。 我添加了一个打印样式表，类似于
@media print
input, textarea
border: 0 !important;
border-style: none !important;
这适用于 FF，但不适用于 chrome。
-webkit-shadow and
-webkit-appearance
似乎也不影响打印输出。
见：fiddle
编辑：这最终是由以下原因引起的：
Chrome 问题174583：box-shadow，打印时显示为纯黑色。
添加 -webkit-filter:blur(0) 的建议解决方法有点工作，但仍然留下输入边框阴影的痕迹，因此在接受的答案中类似的 javascript 解决方法似乎是最好的暂时接近。
【问题讨论】：
【参考方案1】：这是由引导类.form-control 及其box-shadow 属性引起的。使用 CSS 似乎很难删除（对我来说似乎是 Chrome 打印错误）。用jQuery删除打印类怎么样？可以像往常一样使用@media 查询删除默认输入样式。
工作示例
您可能还希望以正常的浏览器打印事件为目标。
$( ".print-now" ).on( "click", function() //the print button has the class .print-now
event.preventDefault(); // prevent normal button action
$('.form-control').removeClass('form-control'); // remove the form-control class
window.print(); // print the page
$('input').addClass('form-control'); // return the class after printing
);@media print
button
display: none !important;
input,
textarea
border: none !important;
box-shadow: none !important;
outline: none !important;
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<form class="form-inline">
<div class="row">
<div class="col-xs-2">
<input type="text" class="form-control input input-small" maxlength="3" value="some" />
</div>
<div class="col-xs-2">
<input type="text" class="form-control input-medium" value="text" />
</div>
<div class="col-xs-2">
<button class="form-control btn btn-warning print-now">Print me!</button>
</div>
</div>
</form>
<p>When the above is printed, there should be NO borders on the inputs.</p>
<p>How to accomplish this?</p>【讨论】：
感谢您的解决方法。我发现了 Chrome 错误：Issue 174583: box-shadow，打印时显示为纯黑色。 我不想将类表单控件添加到所有输入，而是仅通过以下代码将它们添加到上一个列表中： $objList = $('.form-control').removeClass('form-控制'）; window.print(); $objList.addClass('form-control'); 请注意：您可以将脚本附加到 beforePrint 和 afterPrint 事件，这样即使用户通过浏览器按钮或菜单项启动打印，您也可以正常工作。【参考方案2】：只需将transition: none 添加到.form-control :D
body
padding: 15px;
@media print
.form-control, .form-control.nobug
border: 0;
outline: 0;
box-shadow: none;
.form-control.nobug
transition: none; /*-- THIS IS IMPORTANT -- */
<html>
<head>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
</head>
<body>
<div class="form-group">
<button class="btn btn-primary" onclick="window.print()">Print with your Chrome</button>
</div>
<div class="form-group">
<input type="text" class="form-control" value="form-control bug">
</div>
<div class="form-group">
<input type="text" class="form-control nobug" value="no bug (disable transition)">
</div>
</body>【讨论】：
过渡：无； FTW。【参考方案3】：你需要使用“outline”而不是“border”（或者除了border）
@media print
input, textarea
outline: none !important;
另外，试试border: none 而不是border: 0，如果仍有问题可能会有所帮助。
【讨论】：
感谢您的回复，但我尝试过的所有轮廓和边框排列、0、无、“0无”等都不起作用。 是的，确实如此。在屏幕定位的 css 中使用时，box-shadow: none !important;做的伎俩，它打印无边界。在印刷媒体块内，它似乎被忽略了。以上是关于在打印样式表中隐藏输入边框（chrome）的主要内容，如果未能解决你的问题，请参考以下文章
chrome的input默认样式黄色背景以及选中加粗的边框处理