谷歌瀏覽器表單自動(dòng)填充時(shí)如何去除自動(dòng)添加的默認(rèn)樣式
一、發(fā)現(xiàn)該問題的原因-是在寫賬號(hào)登錄頁(yè)面時(shí)，input表單添加了背景圖片 ， 當(dāng)自動(dòng)填充，搓搓的一坨淡黃色背景出來(lái) 。
這個(gè)原因是我草率的直接設(shè)置在input元素里面，結(jié)果問題就來(lái)了 。所以如果把這個(gè)圖標(biāo)放在input表單外面 ， 就不會(huì)出現(xiàn)這個(gè)問題 。
二、表單自動(dòng)填充會(huì)添加瀏覽器默認(rèn)樣式怎么處理和避免
第二張圖，就是表單自動(dòng)填充后，chrome會(huì)默認(rèn)給自動(dòng)填充的input表單加上input:-webkit-autofill私有屬性
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ì)想到使用樣式覆蓋的方法解決 。我完全可以使用!important去提升優(yōu)先級(jí) 。但是有個(gè)問題，加!important不能覆蓋原有的背景、字體顏色 ， 除了chrome默認(rèn)定義background-color,background-images,color不能使用
!important提升優(yōu)先級(jí)，其他屬性均可使用它來(lái)提升優(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 */
}
思路有兩個(gè)，1、通過打補(bǔ)丁 ， 修復(fù)bug 。2、關(guān)閉瀏覽器自帶填充表單功能
情景一：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.length0) {
window.clearInterval(_interval); // 停止輪詢
autofills.each(function() {
var clone = $(this).clone(true, true);
$(this).after(clone).remove();
});
}
}, 20);
}
先判斷是否是chrome，如果是 ， 則遍歷input:-webkit-autofill元素，再通過取值，附加 ， 移除等操作來(lái)實(shí)現(xiàn) 。這個(gè)方法沒效果!!
所以最后我是不使用圖標(biāo)作為input表單的背景圖片，而是多寫一個(gè)標(biāo)簽，把圖標(biāo)拿到表單外面來(lái) 。
思路二： 關(guān)閉瀏覽器自帶填充表單功能
設(shè)置表單屬性 autocomplete=off/on 關(guān)閉自動(dòng)填充表單 ， 自己實(shí)現(xiàn)記住密碼
form autocomplete=off method=.. action=..
!-- 或?qū)我辉卦O(shè)置 --
input type=text name=textboxname autocomplete=off
如圖：未自動(dòng)填充前，此時(shí)這個(gè)郵箱的小圖標(biāo)是inpu表單的背景圖片
如圖：填充后，郵箱小圖標(biāo)被瀏覽器默認(rèn)樣式覆蓋掉
最后，
如果不想多去處理chrome瀏覽器下表單自動(dòng)填充出現(xiàn)的添加默認(rèn)樣式 ， 那就把這個(gè)小小的圖標(biāo)放到表單外面吧，我這個(gè)因?yàn)槭莍nput框
只有border-bottom，如果這個(gè)input框有邊框，那么可能需要使用一個(gè)div的邊框的來(lái)假裝成input框的邊框，然后input框弄成是沒有邊框的 。
【谷歌瀏覽器表單自動(dòng)填充時(shí)如何去除自動(dòng)添加的默認(rèn)樣式】像這樣的input框
