共计 783 个字符，预计需要花费 2 分钟才能阅读完成。
前言
写前端的，最讨厌的事有几个，其中一个就是用户 / 自己输入的密码被浏览器记住之后，每次打开页面都会自动填充。甚至不分青红皂白，每个页面只要有 password 类型的输入框，就会自动填充。尤其是 chrome。
不仅烦人，有时候还会影响样式，比如 chrome 下，输入框带有背景 icon，但是自动填充会变成黄色背景，你的背景 icon 没了……
怎么办？
解决办法
网上有很多 hack 的办法，有的用 js 控制输入框类型，有的定时器清除输入框的值，但是都不太好用。
经过研究 / 测试，发现了一种很简单的 hack 方法，纯 css+html，不影响页面布局，不需要 js，稳定，效果很棒。
CSS
.hide-input{
width: 0;
height: 0;
position: absolute;
top: -100000px;
opacity: 0;
}
HTML
<input type=”text” class=”hide-input”>
<input type=”password” class=”hide-input”>
<input type=”password” placeholder=” 请输入密码 ” />
对于 chrome 浏览器，如果页面上有两个以上的 password 类型输入框，自动填充的时候只会填充第一个以及改输入框的上一个，分别填充账号和密码。
但是前提是该 password 输入框必须是可见的，不能是 display: none; 或者 visibility: hidden;，所以，对于需要隐藏的输入框，我们设置宽度为 0，高度为 0，透明度为 0，绝对定位，在页面上方很高的位置，这样的设置，既保证了该元素的可见性，又确保不会因为意外而影响到页面的其他元素。
结语
这样的写法，有些累赘。但是如果做成组件，就很方便了。现在前端框架都是组件化的，我们完全可以把 password 输入框做成一个组件，使用起来不就很方便了吗？
希望能给你一点帮助！
