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

Posted 2023-03-06

【中文标题】打印焦点输入元素时，Bootstrap 显示黑色矩形

【英文标题】：Bootstrap shows black rectangles when printing focused input elements

【发布时间】：2015-09-05 17:46:01

【问题描述】：

如果一个输入元素被聚焦，Chrome 大部分时间会打印一个黑色方块。如果同一个元素没有被聚焦，那么一切都总是没问题。

聚焦元素/打印预览

---

未聚焦的元素/打印预览

---

我尝试删除/重置元素上的 CSS 样式，但没有任何效果，我不确定如何解决此问题。有人可以帮忙吗？

** 编辑 **

下面的 sn -p 重现了这个问题；只需运行它并按 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>

【参考方案1】：

disabling transitions的答案。

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

@media print 

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