覆盖Google Chrome中保存的密码字段的样式-Java 学习之路

我正在设计一个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）用户代理样式表包含！重要覆盖以设置以下两项：

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

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

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

4 回答

要完全禁用自动完成（因此删除样式问题），您可以尝试这样做：

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

回复于 2024-04-28T07:16:36+08:00

只需设置阴影就可以解决这个问题：

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

回复于 2024-04-28T07:16:36+08:00

请覆盖默认的CSS，即

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

回复于 2024-04-28T07:16:36+08:00

要重置样式：

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

这对我有用 .

回复于 2024-04-28T07:16:36+08:00

覆盖Google Chrome中保存的密码字段的样式

4 回答

相关问题