我有设计问题与谷歌Chrome浏览器和它的形式自动填充功能。 如果Chrome记住了一些登录/密码,它会将背景颜色更改为黄色。

以下是一些截图:

如何删除背景或只是禁用这个自动填充?


当前回答

将“白色”改为任何你想要的颜色。

input:-webkit-autofill {
    -webkit-box-shadow: 0 0 0 1000px white inset !important;
}

其他回答

对我来说唯一有效的解决方法是:

:-webkit-autofill {
  -webkit-text-fill-color: #000; /* ok for text, no hack */
  transition-property: background-color; /* begin hack for background... */
  transition-delay: 100000s; /* ...end hack for background */
}

这个解决方案并不理想,还在等待更好的…

这帮助了我,一个CSS唯一的版本。

输入:-webkit-autofill { -webkit-box-shadow: 000px 1000px白色嵌入; }

白色可以是你想要的任何颜色。

解决方案:

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

我修复了这个问题的密码字段,我有这样:

将输入类型设置为文本而不是密码

使用jQuery删除输入文本值

使用jQuery将输入类型转换为密码

<input type="text" class="remove-autofill">

$('.js-remove-autofill').val('');    
$('.js-remove-autofill').attr('type', 'password');

在Firefox中,您可以使用autocomplete="off/on"属性禁用表单上的所有自动完成功能。同样,单个项目的自动完成也可以使用相同的属性设置。

<form autocomplete="off" method=".." action="..">  
<input type="text" name="textboxname" autocomplete="off">

你可以在Chrome中测试它,因为它应该工作。