以前在做項目的時候遇到過這個問題，當時年少太輕狂，沒有想過是爲什麼會發生這樣的問題，只覺得作爲一個用戶，每次在登錄網站的時候很有用，很便捷，甚至覺得這個自動填充功能，嗯， 真棒！但是，這次又遇到了這個問題，我不禁陷入了沉思。。。爲什麼會有自動填充呢？爲什麼會變成黃色框框呢？作爲一個開發者，在我不需要它自動填充的時候，它真的，很礙事！
首先，在瀏覽器有點擊過記住密碼的操作的前提下，在直接寫兩個input，type分別等於text和password的情況下，它就會變成這個樣子：
借別人的文，發現是在以下情況下會自動填充用戶和密碼信息:
1、在用戶和密碼包含在form的情況下，同時包含一個 type="text"和 type="password"元素且不包含readonly和disabled屬性，兩個元素可以沒有name和id屬性
2、在沒有form的情況下，同時包含一個 type="text"和 type="password"元素且不包含readonly和disabled屬性，且兩個元素至少都有name或id屬性（但name和id可以是任意值但不能是空或空格）。
當然，這兩種方式我就不一一驗證了， 不廢話，我們直接看解決方式，共兩種：
1、添加input隱藏框來填充
1 <input name="old-userName" type="text">
2 <input name="old-pwd" type="password">
3 <ul class="ul-info">
4 <li><label>賬號：</label>
5 <input id="userName" type="text">
6 </li>
7 <li><label>密碼：</label>
8 <input class="0" type="password">
9 </li>
10 </ul>這種方式是百度了很多，最終發現真心有效的一種方式，呈現如下圖：
需要注意幾點的是：
1、我們寫了兩個input框來讓瀏覽器自動填充，這兩個input必須是放在用戶真實輸入的input框的前面；
2、自動填充的input框需要設置display: none;的樣式；
3、自動填充的input框需要有設置一個name或者是id（class不行偶~~）， 否則會出現這種情況：type='text'正常，type='password'隨便focus一個都會有密碼提示
2、修改選擇器
1 <li><label>賬號：</label>
2<input id="a" type="text">
3</li>
4<li><label>密碼：</label>
5 <input type="password">
6</li>這種方式是我自己閒着無聊，試着玩兒試出來的，感覺這種方式還是比較合理的，畢竟DOM那麼金貴，不需要多餘的input，這種方式需要注意的幾點就是：
1、一定要給type='text'一個id；
2、type='password'不能有id或者name（有其一都會導致自動填充），可以有class；
3、目測這種方式在360上行不通，谷歌沒有問題，謹慎；
3、使用js控制
這方式我就不多加介紹了，網上可以找到，文章最底部也有鏈接可以查看，我也不是太提倡。
看着乾乾淨淨的輸入框，我的內心毫無波瀾~~~
附加一個小提示：如果只是想要去掉那個黃色的背景保留填充的值的話，以下兩種css樣式取其一，都是可以做到的，因爲我們改的樣式不在用戶代理樣式表裏面。
1 input:-webkit-autofill {
2 -webkit-box-shadow: 0 0 0 1000px white inset !important;
3 }
4 input:-webkit-autofill {
5 transition: background-color 5000s ease-in-out 0s;
6 } 
參考：