Question

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

在检查元素时，计算出的样式表明覆盖了来自用户代理样式的颜色，并且已应用了#fff，但是实际的计算样式仍然是来自用户代理的样式。 / p>

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

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

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

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

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

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

已将此错误报告给Chrome。出于安全方面的考虑，开发人员的回复为WontFix。 Chrome开发人员没有说明安全问题是什么，但是我想这是一个恶意网站可能会创建带有隐藏的输入框（无边框，并且背景和前景色与页面背景匹配的HTML）和gather some auto-filled data without the user's knowledge的HTML。 / p>

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

Answer 2

我找到了一个对我有用的答案！参见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/，但这仅适用于不透明的背景，不适用于透明的背景。关于可编织性的文章还包括一个针对透明背景的不错的技巧。

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

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 3

此示例可能不言自明。顺便说一句，用户代理样式表示它不是由设计人员或开发人员设置样式，而是由浏览器设置默认属性。为Codepen here

添加链接

     <style>
    body{
      background:black;
      color:white;
    }

    input[type="password"]{
      background:transparent;
      border-top:none;
      border-right:none;
      border-bottom:2px solid #2c2c2c80;
      border-left:none;
      line-height:2em;
      color:inherit;
    }    
</style>


<body>
    <input type="password" placeholder="password" id="_password" />
</body>

我希望这可以解决您的背景色问题。

Answer 4

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

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

我发现，更改为另一种颜色不会对用户代理样式表（Chrome）产生任何影响，但是使用渐变作为背景。

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

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

4 个答案: