chrome瀏覽器自動填充表單的黃色背景高亮（#FAFFBD）一直困擾著我，我之前沒想著理它，可是最近一個登陸框，需要用到圖標，于是我草率的直接設置在input元素里面，結果問題就來了，很難看很難看，因此還是總結一下。

這個問題，在2008年的時候就已經存在了，隔了好幾年了，在chromium上面可以找到?Issue 46543，但是官方好像沒有理這個問題，英文沒怎么看懂，誰理解的，可以給大家分享一下。

思路一： 打補丁

Webkit內核的瀏覽器有一個-webkit-autofill私有屬性，

通過審查元素可以看到這是由于chrome會默認給自動填充的input表單加上input:-webkit-autofill私有屬性，然后對其賦予以下樣式：

1 2 3 4 5

input:-webkit-autofill, textarea:-webkit-autofill, select:-webkit-autofill { padding: 0px; border: 0px; outline: 0px; font-weight: inherit; font-style: inherit; font-family: inherit; vertical-align: baseline; color: rgb(102, 153, 204);">rgb(250, 255, 189); /* #FAFFBD; */ background-image: none; color: rgb(0, 0, 0); }

?

因此我們就會想到覆蓋這個樣式，代碼如下，但是依然不能覆蓋原有的背景、字體顏色。需要注意的是：加?!important?依然不能覆蓋原有的背景、字體顏色，除了chrome默認定義的background-color，background-image，color不能用?!important?提升其優先級以外，其他的屬性均可使用!important提升其優先級。

1 2 3 4 5 6 7 8 9 10 11 12

input:-webkit-autofill, textarea:-webkit-autofill, select:-webkit-autofill { padding: 0px; border: 0px; outline: 0px; font-weight: inherit; font-style: inherit; font-family: inherit; vertical-align: baseline;">#FFFFFF; background-image: none; color: #333; /* -webkit-text-fill-color: red; //這個私有屬性是有效的 */ } input:-webkit-autofill:hover { /* style code */ } input:-webkit-autofill:focus { /* style code */ }

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

解決辦法：

1 2 3 4

input:-webkit-autofill { -webkit-box-shadow: 0 0 0px 1000px white inset; -webkit-text-fill-color: #333; }

?

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

解決辦法：

1 2 3 4 5 6 7 8 9 10 11 12 13

if (navigator.userAgent.toLowerCase().indexOf("chrome") >= 0) { var _interval = window.setInterval(function () { var autofills = $('input:-webkit-autofill'); if (autofills.length > 0) { window.clearInterval(_interval); // 停止輪詢 autofills.each(function() { var clone = $(this).clone(true, true); $(this).after(clone).remove(); }); } }, 20); }

?

下面的js不是太靠譜

1 2 3 4 5 6 7 8

if (navigator.userAgent.toLowerCase().indexOf("chrome") >= 0) { $(window).load(function(){ $('input:-webkit-autofill').each(function(){ var clone = $(this).clone(true, true); $(this).after(clone).remove(); }); }); }

?

思路二： 關閉瀏覽器自帶填充表單功能

設置表單屬性?autocomplete="off/on"?關閉自動填充表單，自己實現記住密碼

1 2 3 4

<!-- 對整個表單設置 --> <form autocomplete="off" method=".." action=".."> <!-- 或對單一元素設置 --> <input type="text" name="textboxname" autocomplete="off">

?

網上大部分文章是使用Cookie實現記住用戶名、密碼。不管是在前端，還是后端都可以實現。本文不對Cookie存儲展開討論。可自行谷歌

原文：http://zcoder.cn/2015/01/14/front-end/chrome-autofill/

轉載于:https://www.cnblogs.com/lichuntian/p/4507800.html

總結

以上是生活随笔為你收集整理的Chrome 自动填充的表单是淡黄色的背景怎么办！的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。