一、發現該問題的原因-是在寫賬號登錄頁面時,input表單添加了背景圖片,當自動填充,搓搓的一坨淡黃色背景出來。
這個原因是我草率的直接設置在input元素裡面,結果問題就來了。所以如果把這個圖標放在input表單外面,就不會出現這個問題。
二、表單自動填充會添加浏覽器默認樣式怎麼處理和避免
第二張圖,就是表單自動填充後,chrome會默認給自動填充的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); }
看到這裡添加上這段代碼,我會想到使用樣式覆蓋的方法解決。我完全可以使用!important去提升優先級。但是有個問題,加!important不能覆蓋原有的背景、字體顏色,除了chrome默認定義background-color,background-images,color不能使用
!important提升優先級,其他屬性均可使用它來提升優先級。
input:-webkit-autofill, textarea:-webkit-autofill, select:-webkit-autofill { background-color: #FFFFFF; background-image: none; color: #333; /* -webkit-text-fill-color: red; //這個私有屬性是有效的 */ } input:-webkit-autofill:hover { /* style code */ } input:-webkit-autofill:focus { /* style code */ }
思路有兩個,1、通過打補丁,修復bug。2、關閉浏覽器自帶填充表單功能
情景一: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); }
先判斷是否是chrome,如果是,則遍歷input:-webkit-autofill元素,再通過取值,附加,移除等操作來實現。 這個方法沒效果!!
所以最後我是不使用圖標作為input表單的背景圖片,而是多寫一個標簽,把圖標拿到表單外面來。
思路二: 關閉浏覽器自帶填充表單功能
設置表單屬性 autocomplete="off/on" 關閉自動填充表單,自己實現記住密碼
<!-- 對整個表單設置 -->
<form autocomplete="off" method=".." action="..">
<!-- 或對單一元素設置 -->
<input type="text" name="textboxname" autocomplete="off">
如圖:未自動填充前,此時這個郵箱的小圖標是inpu表單的背景圖片
如圖:填充後,郵箱小圖標被浏覽器默認樣式覆蓋掉
最後,
如果不想多去處理chrome浏覽器下表單自動填充出現的添加默認樣式,那就把這個小小的圖標放到表單外面吧,我這個因為是input框
只有border-bottom,如果這個input框有邊框,那麼可能需要使用一個div的邊框的來假裝成input框的邊框,然後input框弄成是沒有邊框的。
像這樣的input框
通過以上方法成功幫朋友解決浏覽器自動添加默認樣式問題,小伙伴們可以放心參考此文。