chrome表單自動(dòng)填充后，input文本框的背景會(huì)變成偏黃色的，這是由于chrome會(huì)默認(rèn)給自動(dòng)填充的input表單加上input:-webkit-autofill私有屬性，然后對(duì)其賦予以下樣式：


在有些情況下，這個(gè)黃色的背景會(huì)影響到我們界面的效果，尤其是在我們給input文本框使用圖片背景的時(shí)候，原來(lái)的圓角和邊框都被覆蓋了：
 
情景一：input文本框是純色背景的

可以對(duì)input:-webkit-autofill使用足夠大的純色內(nèi)陰影來(lái)覆蓋input輸入框的黃色背景；如：


如果你有使用圓角等屬性，或者發(fā)現(xiàn)輸入框的長(zhǎng)度高度不太對(duì)，可以對(duì)其進(jìn)行調(diào)整，除了chrome默認(rèn)定義的background-color，background-image，color不能用!important提升其優(yōu)先級(jí)以外，其他的屬性均可使用!important提升其優(yōu)先級(jí)，如：


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

這個(gè)比較麻煩，目前還沒(méi)找到完美的解決方法，有兩種選擇：
1、如果你的圖片背景不太復(fù)雜，只有一些簡(jiǎn)單的內(nèi)陰影，那個(gè)人覺(jué)得完全可以使用上面介紹的方法用足夠大的純色內(nèi)陰影去覆蓋掉黃色背景，此時(shí)只不過(guò)是沒(méi)有了原來(lái)的內(nèi)陰影效果罷了。
2、如果你實(shí)在想留住原來(lái)的內(nèi)陰影效果，那就只能犧牲c(diǎn)hrome自動(dòng)填充表單的功能，使用js去實(shí)現(xiàn)，例如：


遍歷的對(duì)象可能要根據(jù)你的需求去調(diào)整。如果你不想使用js，好吧，在form標(biāo)簽上直接關(guān)閉了表單的自動(dòng)填充功能：autocomplete=”off”。

關(guān)于網(wǎng)上盛傳的方法不奏效的一些測(cè)試

這個(gè)問(wèn)題困擾了我挺長(zhǎng)一段時(shí)間的，網(wǎng)上寫的方法主要有2種：第一種是在樣式里對(duì)input:-webkit-autofill重寫background-color和color，使用!important提高其優(yōu)先級(jí)。第二種是使用jquery，先判斷是否是chrome，如果是，則遍歷input:-webkit-autofill元素，再通過(guò)取值，附加，移除等操作來(lái)實(shí)現(xiàn)。

但是我測(cè)試發(fā)現(xiàn)，這兩種方法都不湊效！不知道是隨著chrome版本的升級(jí)，現(xiàn)在的chrome（27）已經(jīng)不支持重寫input:-webkit-autofill原有的屬性，還是怎么回事。另外js也無(wú)法獲取到chrome自動(dòng)填充的表單的value值，所以網(wǎng)上盛傳的使用jquery解決的方法也是不湊效，最多也就只能去掉黃色背景，而自動(dòng)填充的value卻被移除了。chrome自動(dòng)填充的表單的value值是存在DocumentFragment里的div中的，如果有哪位童鞋知道怎么獲取chrome自動(dòng)填充的表單的value值，還請(qǐng)指教一下。

最新評(píng)論