在打印样式表中隐藏输入边框（chrome）答案

【问题标题】：Hiding input borders in print stylesheet (chrome)在打印样式表中隐藏输入边框（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 解决方法似乎是最好的暂时接近。

【问题讨论】：

标签： css twitter-bootstrap google-chrome media-queries

【解决方案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;做的伎俩，它打印无边界。在印刷媒体块内，它似乎被忽略了。