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

【问题标题】：User Agent Style shows as being overridden, but when the page renders, it's not用户代理样式显示为被覆盖，但是当页面呈现时，它不是
【发布时间】：2019-08-12 07:04:59
【问题描述】：

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

检查元素时，计算的样式显示来自用户代理样式的颜色被覆盖并应用#fff，但实际计算的样式仍然是来自用户代理的样式。

关于如何摆脱这个的任何想法？

这是我用来尝试覆盖它的 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;
}

【问题讨论】：

标签： css

【解决方案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 过渡应用了自动完成样式。如果您延迟该输入上的所有转换，则永远不会应用样式。

【讨论】：

【解决方案2】：

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

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

我在 (codepen) 中复制了 OP 的问题。请注意，我什至尝试使用 !important 后缀在文档自己的 CSS 中更新 input:-internal-autofill-selected 用户代理样式。即使在 CSS 中，Chrome 仍然使用原始的、硬编码的用户代理样式。这个 codepen 还告诉你，以下方法都不能有效地覆盖 Chrome 中的用户代理样式。

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

这已作为错误报告给 Chrome。开发人员的回复是WontFix，引用了安全问题。 Chrome 开发人员没有说明安全问题是什么，但我猜是恶意网站可以创建带有隐藏输入框（无边框，背景和前景色与页面背景匹配）和gather some auto-filled data without the user's knowledge 的 HTML。

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

【讨论】：

【解决方案3】：

当:checked 时，我在尝试设置选择选项元素的背景颜色时遇到了类似的问题。

我正在使用伪元素将复选框添加到允许多选且不希望整行显示为被选中的选择元素。

我发现更改为另一种颜色对用户代理样式表 (Chrome) 没有影响，但使用渐变作为背景。

option:checked {
    background: linear-gradient(0, #fff, #fff);
}

【讨论】：