Chrome打印文本框异常显示灰色填充问题求助

我之前也碰到过Chrome打印时样式异常的类似情况，结合你提到的「完整页面打印出问题、仅结果区域正常」以及-webkit-print-color-adjust:exact无效的细节，咱们可以从这几个角度尝试解决：

1. 给文本框设置优先级足够的打印专属样式 #

Chrome的打印引擎有时候会用默认的用户代理样式覆盖自定义样式，尤其是当你的样式选择器不够精准时。试试给文本框单独写打印媒体查询，并且确保样式优先级拉满：

@media print {
  input[type="text"], 
  textarea,
  /* 加上你页面里所有受影响的文本框类型 */
  input[type="email"],
  input[type="password"] {
    background-color: #ffffff !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact; /* 兼容其他支持该属性的浏览器 */
    border-color: #000000 !important; /* 可选：确保边框也正常显示 */
  }
}

这里的!important是特殊场景下的权宜之计——如果你的页面有复杂的样式继承，它能确保打印样式不会被其他规则覆盖。

2. 排查父容器的打印样式干扰 #

你提到「仅打印结果区域正常」，说明完整页面里的父容器（比如body、页面全局容器）可能带有打印时的背景或滤镜样式，间接导致文本框变灰。可以在打印媒体查询里重置这些父元素的样式：

@media print {
  body,
  .page-wrapper, /* 替换成你页面的全局容器类名 */
  .container {
    background: none !important;
    filter: none !important;
    -webkit-filter: none !important;
  }
}

很多时候，全局的打印样式会被忽略，但它们恰恰是导致局部元素样式异常的根源。

3. 检查嵌套容器/iframe的样式隔离问题 #

如果你的完整页面包含iframe或者多层嵌套容器，自定义的打印样式可能没穿透到文本框所在的层级。这种情况下，要么确保打印样式能作用到嵌套元素（比如给iframe内部的文本框也加同样的打印样式），要么在打印完整页面时，临时禁用嵌套容器的特殊样式。

为什么之前的-webkit-print-color-adjust:exact无效？ #

这个属性需要直接作用在有背景色的元素上，如果你的样式写在了父元素上，而文本框本身没有显式设置background-color，那么exact属性不会生效。另外，如果Chrome的打印设置里「背景图形」被禁用（默认可能是关闭的），即使加了这个属性也可能失效——你可以先打开Chrome打印预览，找到「更多设置」，勾选「背景图形」试试，但这是用户侧的设置，最好还是通过样式解决。

内容的提问来源于stack exchange，提问作者PapaWalrus