Google Chrome表单自动填充及其黄色背景

html CSS

小宇宙

2020-03-24

我对Google Chrome浏览器及其表单自动填充功能存在设计问题。如果Chrome记住了一些登录名/密码,它将背景色更改为黄色。

以下是一些屏幕截图:

替代文字 替代文字

如何删除该背景或仅禁用此自动填充?

第3589篇《Google Chrome表单自动填充及其黄色背景》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

17个回答
ItachiTonyJinJin 2020.03.24
<input type="text" name="foo" autocomplete="off" />

相似问题:链接

宝儿 2020.03.24

刚刚发现自己有同样的问题。这对我有用:

form :focus {
  outline: none;
}
Tony十三Itachi 2020.03.24

如果要在应用CSS之前避免黄色闪烁,请对那个坏男孩打一下过渡,如下所示:

input:-webkit-autofill {
    -webkit-box-shadow: 0 0 0 1000px white inset !important;
    transition: background-color 10s ease-in-out 0s;
}
Mandy村村 2020.03.24

添加autocomplete="off"不会削减它。

将输入类型属性更改为type="search"
Google不会将自动填充应用于具有搜索类型的输入。

希望这可以节省您一些时间。

西里Near 2020.03.24

票价namrouti答案是正确的。但是,当选择输入时,背景仍然变为黄色添加!important修复问题。如果您还想要textarea并且select具有相同的行为,只需添加textarea:-webkit-autofill, select:-webkit-autofill

仅输入

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

输入,选择,文本区域

input:-webkit-autofill, textarea:-webkit-autofill, select:-webkit-autofill {
    background-color: rgb(250, 255, 189) !important;
}
Near飞云 2020.03.24

没有一个解决方案对我有用,用户名和密码输入仍在填充并且背景为黄色。

因此,我问自己:“ Chrome如何确定在给定页面上应自动填充的内容?”

“它会查找输入ID,输入名称吗?表单ID?表单动作?”

通过对用户名和密码输入的实验,只有两种发现导致Chrome无法找到应自动填充的字段的方法:

1)将密码输入置于文本输入之前。2)给他们相同的名称和ID ...或不给名称和ID。

页面加载后,可以使用javascript更改页面上输入的顺序,也可以动态为其指定名称和ID。

而且Chrome不知道是什么原因...自动完成功能不起作用。

疯狂破解,我知道。但这对我有用。

Chrome 34.0.1847.116,OSX 10.7.5

2020.03.24

在您的标签中,只需插入这一小段代码。

autocomplete="off"

但是,请勿将其放在用户名/电子邮件/ idname字段中,因为如果您仍在使用自动完成功能,它将在此字段中禁用它。但是我找到了解决方法,只需将代码放在密码输入标签中,因为无论如何您永远不会自动完成密码。此修复程序应该删除电子邮件/用户名字段上的颜色强制和行事自动完成功能,并使您避免使用Jquery或javascript之类的笨拙的骇客。

小小 2020.03.24

如果您想完全摆脱它,我已经调整了前面的答案中的代码,因此它也适用于悬停,活动和集中注意力:

input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:active, input:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0 1000px white inset;
}
老丝L 2020.03.24

我用这个

input:-webkit-autofill { -webkit-box-shadow: 0 0 0px 1000px white inset !important; }
input:focus:-webkit-autofill { -webkit-box-shadow: 0 0 0px 1000px white inset !important; }
/* You can use color:#color to change the color */
米亚 2020.03.24

这帮助了我,仅CSS版本。

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

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

Gil伽罗小宇宙 2020.03.24

答案的组合对我有用

<style>
    input:-webkit-autofill,
    input:-webkit-autofill:hover,
    input:-webkit-autofill:focus,
    input:-webkit-autofill:active {
        -webkit-box-shadow: 0 0 0px 1000px #373e4a inset !important;
           -webkit-text-fill-color: white !important;
   }
</style>
小宇宙 2020.03.24

有点黑,但对我来说很完美

input:-webkit-autofill {
    -webkit-box-shadow: 0 0 0px 1000px white inset;
}
西里Near 2020.03.24

为我工作,只需要更改css。

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

您可以将任何颜色代替#ffffff

神无Green前端 2020.03.24

如果你们想要透明的输入字段,则可以使用过渡和过渡延迟。

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
    -webkit-transition-delay: 9999s;
    -webkit-transition: color 9999s ease-out, background-color 9999s ease-out;
}
Gil伽罗小宇宙 2020.03.24

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

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

您可以在Chrome浏览器中对其进行测试,因为它应该可以正常工作。

小小 2020.03.24

以下CSS删除了黄色背景色,并将其替换为您选择的背景色。它不会禁用自动填充,并且不需要jQuery或Javascript黑客。

input:-webkit-autofill {
    -webkit-box-shadow:0 0 0 50px white inset; /* Change the color to your own background color */
    -webkit-text-fill-color: #333;
}
input:-webkit-autofill:focus {
    -webkit-box-shadow: /*your box-shadow*/,0 0 0 50px white inset;
    -webkit-text-fill-color: #333;
}

复制的解决方案来自: 覆盖浏览器表单填充并使用HTML / CSS突出显示输入

2020.03.24

将“白色”更改为所需的任何颜色。

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

问题类别

JavaScript Ckeditor Python Webpack TypeScript Vue.js React.js ExpressJS KoaJS CSS Node.js HTML Django 单元测试 PHP Asp.net jQuery Bootstrap IOS Android