用户代理样式显示为被覆盖，但当页面呈现时，它不是

Question

我试图隐藏通过用户代理样式输入的密码输入字段的自动填充样式。

在检查元素时，计算出的样式显示来自 user-agent-style 的颜色被覆盖并且正在应用 #fff，但实际计算的样式仍然是来自 user-agent 的颜色。

关于如何摆脱这种情况的任何想法？

这是我用来尝试覆盖它的 CSS：

.password {
    border-right: none;
    background-color: #fff !important;
}
#MainContent_txtPassword:-webkit-autofill, input:-internal-autofill- 
previewed, input:-internal-autofill-selected, textarea:-internal-autofill- 
previewed, textarea:-internal-autofill-selected, select:-internal-autofill- 
previewed, select:-internal-autofill-selected {
   background-color: white !important;
}

Answer 1

我找到了一个适合我的答案！请参阅https://webagility.com/posts/the-ultimate-list-of-hacks-for-chromes-forced-yellow-background-on-autocompleted-inputs

我最初遇到过https://css-tricks.com/snippets/css/change-autocomplete-styles-webkit-browsers/但这仅适用于不透明背景，而不适用于透明背景。webagility 文章也包括一个很好的透明背景技巧。

总结这两篇文章，我应用的解决方案是：

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover,
textarea:-webkit-autofill:focus,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus {
  -webkit-transition-delay: 99999s;
}

这样做的原因是因为 chrome 通过 css 过渡应用自动完成样式。如果您延迟该输入的所有转换，则永远不会应用样式。

Answer 2

此行为仅在 Chrome 中可见（在 Firefox 中没有，我没有测试 Edge 或其他）。Chrome 将淡黄色背景 (#E8F0FE) 和黑色文本应用于所有自动填充的输入。自 Chrome 74 版起，此自动填充文本的用户代理样式在 Chrome 的呈现中具有硬编码优先级。此行为是 Chrome 开发人员有意设计的。

在 Chrome 中，这些硬编码样式将覆盖您可以在文档中或通过 Javascript 设置的任何内容。在原始问题中，样式检查器显示 OP 的background-color: white !important样式优先于用户代理样式input:-internal-autofill-selected。样式检查器错误地表明：它看起来不知道自动填充文本的用户代理样式具有硬编码优先级。

我在 ( codepen ) 中复制了 OP 的问题。请注意，我什至尝试input:-internal-autofill-selected使用!important后缀更新文档自己的 CSS 中的用户代理样式。即使在 CSS 中，Chrome 仍然使用原始的、硬编码的用户代理样式。此代码笔还向您展示了以下方法均无法有效覆盖 Chrome 中的用户代理样式。

1. 使用更具体的 CSS
2. 为 HTML 中的元素添加样式
3. 在backgroundColor输入数据后，使用 Javascript 中的事件来更改元素的样式属性（例如）

这已作为错误报告给 Chrome。开发人员的回应是WontFix，理由是安全问题。Chrome 开发人员没有说明安全问题是什么，但我猜是恶意站点可以创建带有隐藏输入框的 HTML（没有边框，背景和前景色与页面背景匹配）并收集一些自动填充的数据，而不需要用户的知识。

这种“不会修复”的态度并不是一个很好的解决方案。它惹恼了想要控制输入框外观的设计师。OP 想要纯白色背景，而 Chrome 将其更改为 #E8F0FE，这可能没什么大不了的，但对于想要使用深色背景的设计师来说，情况更糟。Chrome 以编程方式检查页面是否设置了具有足够高对比度的输入框样式以供用户可见有多难？Chrome 也没有完全解决安全问题，因为恶意站点可以通过其他方式隐藏输入框：它可能在可见屏幕区域之外，或者被不同的页面元素覆盖。