覆盖谷歌浏览器中保存的密码字段的样式

Posted 2023-02-22

【中文标题】覆盖谷歌浏览器中保存的密码字段的样式

【英文标题】：Override style of saved password field in google chrome

【发布时间】：2011-09-11 01:24:25

【问题描述】：

我正在设计一个 Web 应用程序，一般样式涉及深色背景上的白色文本。

此样式包括为用户名和密码字段使用自定义（深色）图像，并带有白色文本。

如果用户使用 google chrome 登录并选择保存表单的登录详细信息，则下次访问时，用户名和密码字段将显示为淡黄色和白色文本，几乎无法阅读。这看起来很糟糕。

我将如何覆盖这种样式，防止谷歌浏览器更改已保存的用户名和密码字段的背景。

<style type="text/css">
  input 
    border: none;
    background: url('darkinput.png');
    color: #fff;
  
</style>

<input type="text" name="email" id="text" /> 
<input type="password" name="password" id="text" />

编辑：目前（google-chrome v11.0.696.57）用户代理样式表包含 !important 覆盖以设置以下两项：

input:-webkit-autofill
  background-color: rgb(250, 255, 189) !important;
  background-image: none !important;

在下面的 url 上有一个问题报告，我鼓励所有阅读此内容的人投票：

http://code.google.com/p/chromium/issues/detail?id=46543

【问题讨论】：

使用 box-shadow 方法可行，但这并不能解决字体颜色的问题 - 例如黑色阴影，白色字体。

【参考方案1】：

只需设置阴影即可解决此问题：

input:-webkit-autofill  
  -webkit-box-shadow:200px 200px 100px white inset; 
  box-shadow:200px 200px 100px white inset; 

【参考方案2】：

要完全禁用自动完成（从而消除样式问题），您可以尝试以下操作：

<form autocomplete="off">
...
</form>

但另一种可能性是在页面加载后使用 jquery 删除样式。

if (navigator.userAgent.toLowerCase().indexOf("chrome") >= 0) 
$(window).load(function()
    $('input:-webkit-autofill').each(function()
        var text = $(this).val();
        var name = $(this).attr('name');
        $(this).after(this.outerhtml).remove();
        $('input[name=' + name + ']').val(text);
    );
);

【参考方案3】：

要重置样式：

input:-webkit-autofill 
   -webkit-box-shadow: 0 0 0px 1000px #fff inset;

这对我有用。

【参考方案4】：

请覆盖默认css，即

input:-webkit-autofill 
  background-color: #FAFFBD !important;
  background-image:none !important;
  color: #000000 !important;

【讨论】：

这可以使文本可读。不幸的是，似乎无法设置背景颜色或背景图像（即使使用 !important），因为 chrome 的用户代理样式表已经使用 !important 设置了背景颜色和背景图像。

Matthew 是对的，使用我的答案的 sn-p 可以解决这个问题，而无需使用 !important。我覆盖了一个不同的属性，但最终结果是我们所期望的。一个白色的背景！