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

Question

如果输入元素被聚焦，Chrome将大部分时间打印黑色方块。如果相同的元素没有聚焦，那么总是就好了。

聚焦元素/打印预览

未聚焦元素/打印预览

我尝试删除/重置元素上的CSS样式，但没有任何作用，我不知道如何解决这个问题。有人可以帮忙吗？

**编辑**

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

＆＃13;

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 1

获得https://github.com/aspnet-contrib/AspNet.Security.OpenIdConnect.Server/blob/vNext/samples/Mvc/Mvc.Server/Extensions/AppBuilderExtensions.cs#L50的答案。

这是CSS，对于任何有兴趣的人。

@media print {

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

}