谷歌瀏覽器記住密碼輸入框顏色改變功能 自動填充功能

谷歌瀏覽器記住密碼輸入框顏色會改變，而且字體顏色會變成黑色，如圖

輸入框原來的樣式是這樣的
![]
然而記住密碼後，輸入框顏色就變成了黃色，而且字體變成了黑色

這是因爲谷歌瀏覽器的自帶樣式的緣故：

input:-webkit-autofill, textarea:-webkit-autofill, select:-webkit-autofill {

background-color: rgb(250, 255, 189);

background-image: none;

color: rgb(0, 0, 0);

}

若是咱們想記住密碼後仍然想要之前的顏色，能夠用 設置input內陰影 的方式把黃色覆蓋掉，css代碼：

input:-webkit-autofill{

-webkit-box-shadow: 0 0 0 400px #E8ECED inset;

}

這樣輸入框就變成了

然而字體仍然是黑色的，若是想改變字體，則
input:-webkit-autofill{

-webkit-box-shadow: 0 0 0 400px #E8ECED inset;

-webkit-text-fill-color: #666666;//設置字體顏色

}

屏蔽谷歌瀏覽器記住表單密碼

解決谷歌瀏覽器表單記住密碼引發的各類bug，記住密碼後輸入框看似有值，但使用js表單驗證的時候卻獲取不到值，爲了解決這個問題須要屏蔽瀏覽器的默認記住密碼這一共能，代碼以下：

<input id="loginname" type="text" placeholder="手機號" autocomplete="off">

<input id="passwd" type="password" placeholder="密碼" autocomplete="off">

<script>

$('#passwd').attr('type','text').focus(function(){

$(this).attr('type','password');

});

</script>

問題所在：

谷歌瀏覽器會自動填充密碼，某方面是很方便，可是也會出現意想不到的效果，好比填充的顏色變成黃色，可能與設計不符，主要緣由是瀏覽器給input加上了一個樣式：

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

解決方法其一能夠是覆蓋瀏覽器的樣式。但，咱們能夠嘗試更加高大上的解決辦法：

解決辦法：

在舊版的谷歌瀏覽器中，可使用如下方法：

<form autocomplete="off">

• 1

對於整個表單生效；

<input autocomplete="off">

• 1

對於單個input生效；

在新版的谷歌瀏覽器中，autocomplete=」off」已經失效，須要嘗試如下方法：

<!-- fake fields are a workaround for chrome autofill getting the wrong fields --> <input style="display:none" type="text" name="fakeusernameremembered"/> <input style="display:none" type="password" name="fakepasswordremembered"/>

用法是在form表單的加入這兩句代碼，而後name須要改爲將要禁止填充的input。其原理是，谷歌瀏覽器會自動填充這個input，而不會填充你代碼中實際展現的input，從而繞過谷歌瀏覽器的自動填充功能；

(注：看別的內容記錄下來)