最近我参与的开源项目Chat2DB遇到了这样一个问题
浏览器自动回填了账号密码，这也太丑了吧！于是直接百度 <如何让浏览器不填充账号密码>
网友们给了一个这样的答案添加 autocomplete="off"
于是我加到了input上没用，加在form上还是没用，当然autocomplete="new-password"这玩意儿也没用。
why? 为什么就不生效呢！我查了查 MDN的解释是这样的
设置 `autocomplete="off"` 会有两种效果：
- 这会告诉浏览器，不要为了以后在类似表单上自动填充而保存用户输入的数据。但浏览器不一定遵守。
- 这会阻止浏览器缓存会话历史记录中的数据。若表单数据缓存于会话历史记录，用户提交表单后，再点击返回按钮返回之前的表单页面，则会显示用户之前输入的数据。
现代浏览器实现了内建的密码管理功能：当用户在一个网站上输入了用户名和密码，浏览器会为用户提供记忆功能。当用户再次访问这个网站时，浏览器使用保存的值自动填写登录字段。
另外，浏览器可让用户指定一个主密码用来加密存储的登录信息。
即使没有主密码，浏览器内置的密码管理对安全也有益无害。由于用户不需要记住已被浏览器存储的密码，因此他们可以放心选择更强的密码。
感兴趣的也可以看看 [Can I use]谷歌和edge确实是不支持该属性
搞清楚了原因，还是没解决掉，我又请教了chatgpt
chatgpt是这样给我说的：
你应该把它当成更便捷用户的功能,而不是一个问题
真是一语惊醒梦中人，确实谷歌费尽心思的搞了自动填充，你非要与他作对仅用掉它干什么呢？
于是我们的方向变成了，如何让这个输入框更美观，于是就有了这样一段代码
// 修改账号密码自动回填后input背景变色问题
input:-webkit-autofill {
-webkit-text-fill-color: var(--color-text) !important; // 填充状态下的字体颜色
transition: background-color 0s 9999999999s;
caret-color: var(--color-text); // 光标的颜色
}
用了 transition 是因为并没有办法直接改变 填充的背景色，只能给他加个 延时9999999999s 这样也算是变相的改变了输入框的背景色
最后的效果：
完结！
