https://segmentfault.com/q/1010000000671971

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

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

思路一： 打補(bǔ)丁

Webkit內(nèi)核的瀏覽器有一個(gè)-webkit-autofill私有屬性，

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

input:-webkit-autofill, textarea:-webkit-autofill, select:-webkit-autofill {
  background-color: rgb(250, 255, 189); /* #FAFFBD; */
  background-image: none;
  color: rgb(0, 0, 0);
}

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

input:-webkit-autofill, textarea:-webkit-autofill, select:-webkit-autofill {
  background-color: #FFFFFF;
  background-image: none;
  color: #333;
  /* -webkit-text-fill-color: red; //這個(gè)私有屬性是有效的 */
}
input:-webkit-autofill:hover {
  /* style code */
}
input:-webkit-autofill:focus {
  /* style code */
}

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

解決辦法：

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

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

解決辦法：

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不是太靠譜

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();
    });
  });
}

思路二： 關(guān)閉瀏覽器自帶填充表單功能

設(shè)置表單屬性 autocomplete="off/on" 關(guān)閉自動(dòng)填充表單，自己實(shí)現(xiàn)記住密碼

<!-- 對(duì)整個(gè)表單設(shè)置 -->
<form autocomplete="off" method=".." action="..">
<!-- 或?qū)我辉卦O(shè)置 -->
<input type="text" name="textboxname" autocomplete="off">

網(wǎng)上大部分文章是使用Cookie實(shí)現(xiàn)記住用戶名、密碼。不管是在前端，還是后端都可以實(shí)現(xiàn)。本文不對(duì)Cookie存儲(chǔ)展開討論。可自行谷歌

其他

stackoverflow.com上面也有類似的回答
Google Chrome form autofill and its yellow background
Override browser form-filling and input highlighting with HTML/CSS