去除瀏覽器給input輸入框自動填充的黃色背景

在網上看到這種方式，沒有親試：

1.禁止谷歌瀏覽器默認填充和保存密碼

　　瀏覽器保存密碼是根據input="password"來判斷的，全部咱們只要保證瀏覽器在dom結構中識別不到密碼框便可。
　　so：
　　-->密碼輸入位置默認爲input="text"。
　　-->在輸入框上添加 onfocus="this.type='password'" 輸入框得到焦點時改變輸入框格式爲密碼框　　
　　-->輸入密碼
　　-->在提交前清空輸入框密碼，並修改密碼框爲文本框。（個人提交爲發生Ajax提交，可根據本身實際狀況進行調整，或者狀況密碼以後，將值保存在一個隱藏域中，再提交單）
　　-->commit。

　　1）. 使用此方法便可在進入界面時瀏覽器不填充密碼，也不會在提交以後保存密碼。
　　2）. IE8+、Chrome、FF、360測試經過。（ie8會出問題的，input的type屬性不能修改）
　　3）. 其實寫這段代碼的時候只是爲了禁止Chrome保存密碼，對於其餘瀏覽器只是驗證是否正常顯示。
　　4）. 此方法不針對經過js向密碼框輸入密碼的狀況，由於js輸入不觸發得到焦點事件。

2.可能可行的其餘方法：

　　不論是否已經記住密碼，只要是 password的input中不使用id（或id爲空）便可（準確說應該是 id 和 name 都爲空或者是沒有就能夠）。測試可行，谷歌版本 57.0.2987.133

　　連接：https://www.zhihu.com/question/23529765/answer/90632851

3.設置隱藏域

　　<input type="password" name="txtPassword" style="display:none">

　　<input type="password" name="txtPassword" placeholder="請輸入密碼" autocomplete="off" />

　　谷歌瀏覽器比較吊，只加上一個隱藏密碼框仍是不行的，把兩個密碼框名字改爲同樣的就行了，這傢伙就找不到了，(*^__^*) 嘻嘻……

　　再給你們分享一個解決方案，有須要的能夠試一試

　　<input type="password" style="display:none;width:0;height:0;">

　　<input data-placeholder="請輸入密碼" name="password" data-required="true" type="password" autocomplete="new-password" data-max-length="50" tabindex="2" 　　　　　spellcheck="false" id="auto-id-1505904797992" placeholder="請輸入密碼">

　　先輸入一個隱藏文本域，再輸入第二個展現的文本框，重點是我加黑的字體，編譯器可能會沒法識別，可是瀏覽器能夠解析。

　　連接：https://www.zhihu.com/question/23529765/answer/140579951

4.不由止，只作修改背景色

　　chrome表單自動填充後，input文本框的背景會變成偏黃色的，這是因爲chrome會默認給自動填充的input表單加上input:-webkit-autofill私有屬性，而後對其賦予如下樣式：

在有些狀況下，這個黃色的背景會影響到咱們界面的效果，尤爲是在咱們給input文本框使用圖片背景的時候，原來的圓角和邊框都被覆蓋了

1. input:-webkit-autofill {
2. background-color: #FAFFBD;
3. background-image: none;
4. color: #000;
5. }

情景一：input文本框是純色背景的

　　能夠對input:-webkit-autofill使用足夠大的純色內陰影來覆蓋input輸入框的黃色背景；如：

1. input:-webkit-autofill {
2. -webkit-box-shadow: 0 0 0px 1000px white inset;
3. border: 1px solid #CCC!important;
4. }

若是你有使用圓角等屬性，或者發現輸入框的長度高度不太對，能夠對其進行調整，除了chrome默認定義的background-color，background-image，color不能用!important提高其優先級之外，其餘的屬性都可使用!important提高其優先級，如：

1. input:-webkit-autofill {
2. -webkit-box-shadow: 0 0 0px 1000px white inset;
3. border: 1px solid #CCC!important;
4. height: 27px!important;
5. line-height: 27px!important;
6. border-radius: 0 4px 4px 0;
7. }

情景二：input文本框是使用圖片背景的

這個比較麻煩，目前還沒找到完美的解決方法，有兩種選擇：

一、若是你的圖片背景不太複雜，只有一些簡單的內陰影，那我的以爲徹底可使用上面介紹的方法用足夠大的純色內陰影去覆蓋掉黃色背景，此時只不過是沒有了原來的內陰影效果罷了。

二、若是你實在想留住原來的內陰影效果，那就只能犧牲chrome自動填充表單的功能，使用js去實現，例如：

 

1. $(function() {
2. if (navigator.userAgent.toLowerCase().indexOf("chrome") >= 0) {
3. $(window).load(function(){
4. $('ul input:not(input[type=submit])').each(function(){
5. var outHtml = this.outerHTML;
6. $(this).append(outHtml);
7. });
8. });
9. }
10. });

遍歷的對象可能要根據你的需求去調整。若是你不想使用js，好吧，在form標籤上直接關閉了表單的自動填充功能：autocomplete=」off」。