Bootstrap 打印聚焦输入元素时显示黑色矩形

Question

如果输入元素获得焦点，Chrome 大多数时候会打印一个黑色方块。如果同一个元素没有被聚焦，那么一切都是 always 没问题。

重点元素/打印预览

---

未聚焦的元素/打印预览

---

我在元素上尝试了 removing/resetting CSS 样式，但没有任何效果，而且我不确定如何解决这个问题。有人可以帮忙吗？

** 编辑 **

以下片段重现了该问题；只是 运行 它并按 CTRL+P。大多数情况下，如果选择了任一字段，您应该会得到一个黑色矩形。

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<form class="form">
  <div class="form-group">
    <label for="exampleInputEmail1">Email address</label>
    <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email">
  </div>
  <div class="form-group">
    <label for="exampleInputPassword1">Password</label>
    <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
  </div>
</form>

Answer 1

disabling transitions的回答。

这里是 CSS，任何感兴趣的人都可以。

@media print {

   .form-control {
     -webkit-transition: none !important;
          -o-transition: none !important;
             transition: none !important;
   }

}