用户代理样式显示为被覆盖，但是在页面呈现时，它不是 [英] User Agent Style shows as being overridden, but when the page renders, it's not

问题描述

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

I am trying to hide the autofill style for a password input field that comes in via the user-agent-styles.

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

When inspecting the element, the computed styles show that the color coming from the user-agent-style is being overridden and #fff is being applied, but the actual computed style is still the one coming from the user-agent.

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

Any idea on how to get rid of this?

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

Here is the CSS I am using to try and override it:

.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;
}

推荐答案

在Chrome中可以看到此行为仅（它不在Firefox中，我没有测试Edge或其他工具）。 Chrome将浅黄色背景（＃E8F0FE）和黑色文本应用于所有自动填充的输入。自74版以来，这种用于自动填充文本的用户代理样式在Chrome渲染中具有硬编码优先级。此行为是由Chrome开发人员设计的。

This behaviour is seen in Chrome only (it is not in Firefox, I didn't test Edge or others). Chrome applies a pale yellow background (#E8F0FE) and black text to all autofilled inputs. This user agent style for autofilled text has hard-coded priority in Chrome's rendering since Chrome version 74. This behaviour is intended by the Chrome developers.

在Chrome中，这些硬编码样式将覆盖您可以在文档中或通过Java脚本设置的所有内容。在最初的问题中，Style Inspector显示OP的 background-color：white！important 样式优先于用户代理样式 input：-internal-自动填充选定的。 Style Inspector错误地表明了这一点：看起来好像它不知道自动填充文本的用户代理样式具有硬编码优先级。

In Chrome, these hard-coded styles will override anything you can set yourself in the document or via Javascript. In the original question, Style Inspector shows the OP's background-color: white !important style as having precedence over the user agent style input:-internal-autofill-selected. Style Inspector is wrong to show that: it looks like it does not know that the user agent style for autofilled text has hard-coded priority.

我在其中复制了OP的问题一个（ codepen ）。注意，我什至尝试用！important <>来更新文档自己的CSS中的 input：-internal-autofill-selected 用户代理样式。 / code>后缀。即使在CSS中，Chrome仍然使用原始的硬编码用户代理样式。该代码笔还向您显示了以下任何一种方法都无法有效地覆盖Chrome中的用户代理样式。

I replicated the OP's issue in a (codepen). Note that I even tried to update the input:-internal-autofill-selected user-agent style in the document's own CSS, with the !important suffix. Even with that in the CSS, Chrome still uses the original, hard-coded user-agent style. This codepen also shows you that none of the following methods will be effective to override the user agent style in Chrome.

1. 更明确地使用CSS


2. 向HTML中的元素添加样式


3. 使用Javascript中的事件来更改元素的样式属性（例如 backgroundColor ）输入数据后

1. use CSS with greater specificity
2. add style to the element in HTML
3. use an event in Javascript to change the element's style properties (for example backgroundColor) after data is entered

已将此错误报告给Chrome。开发人员的回应是 WontFix ，并提到了安全性。关心。 Chrome开发人员没有说出安全问题是什么，但是我想这是一个恶意网站可能会创建带有隐藏的输入框（无边框，并且背景和前景色与页面背景匹配的HTML）和收集

This has been reported to Chrome as a bug. The developers' response is WontFix, citing a security concern. Chrome devs don't say what the security concern is, but I guess it is that a malicious site could create HTML with hidden input boxes (no border, and background and foreground colours matching the page background) and gather some auto-filled data without the user's knowledge.

这种 WontFix态度不是一个很好的解决方案。它使想要控制输入框外观的设计人员感到恼火。 OP希望使用纯白色背景，然后Chrome将其更改为＃E8F0FE，这可能没什么大不了的，但是对于想要使用深色背景。 Chrome以编程方式检查该页面为输入框设置的样式具有足够高的对比度以使用户可见的努力程度如何？ Chrome浏览器还没有完全解决安全问题，因为恶意网站可以用其他方式隐藏输入框：输入框可能在可见屏幕区域之外，或者被其他页面元素覆盖。

This "WontFix" attitude is not a great solution. It annoys designers who want to control the appearance of input boxes. The OP wants a pure white background and Chrome changes it to #E8F0FE which is maybe not a big deal, but it's way worse for designers who want to use a dark background. How hard would it be for Chrome to check programmatically that the page has styled the input box with high enough contrast to be visible to the user? Chrome has also not fully solved the security concern, because a malicious site can hide an input box in some other way: it could be outside the visible screen area, or covered by a different page element.

这篇关于用户代理样式显示为被覆盖，但是在页面呈现时，它不是的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！