Google Chrome浏览器记住密码自动填充默认背景等问题记录（前端）

目录

一、取消自动填充默认背景

二、取消自动填充

三、其他

---

一、取消自动填充默认背景

谷歌浏览器记住密码后默认自动填充时会给输入框设置黄色背景，不仅不好看，并且如果输入框有样式或者有图标还会被覆盖，经过搜索发现有多种方法可以解决，以下设置已经测试，使用下面的css设置可以取消背景填充：

//消除google浏览器记住密码自动填充黄色框背景
:-webkit-autofill,
:-webkit-autofill:hover,
:-webkit-autofill:focus,
:-webkit-autofill:active {
  -webkit-text-fill-color: #2b739d !important;
  transition: background-color 5000s ease-in-out 0s;
}

二、取消自动填充

如果已经记住密码，在注册界面会自动将密码和帐号填充，在Password输入框中设置autocomplete="new-password"可以取消自动填充帐号密码。

<el-form-item label="密码" prop="password">
    <el-input v-model="password" type="password" autocomplete="new-password" placeholder="请输入密码"></el-input>
</el-form-item>

三、其他

Google Chrome浏览器记住密码规则简记：

谷歌浏览器记住密码会将type="password"的DOM以及上面最近的input当作用户名和密码保存下来，如果上面最近的input不是账号，则会出现填充错误的情况