chrome autocomplete破解樣式選擇

我有一個樣式化的選擇框，在所有瀏覽器中都能正常工作。這裏的CSS（其中包含了很多不同的造型來處理各種瀏覽器）：chrome autocomplete破解樣式選擇

select { 
    background-image: url(../img/dropdown.png); 
    background-repeat: no-repeat; 
    background-position: right center; 
    padding-bottom: 6px; 
    padding-right: 36px; 
    -webkit-border-radius: 0; 
    -moz-border-radius: 0; 
    -ms-border-radius: 0; 
    -o-border-radius: 0; 
    border-radius: 0; 
    -webkit-appearance: none; 
    background-color: white; 
    border: 1px solid; 
    border-right: none; 
    border-color: #9da6ab; 
    color: #36495a; 
    display: inline-block; 
    outline: 0; 
    margin: 0; 
    width: 100%; 
    height: 28px; 
    padding: 5px 36px 6px 1px; 
    text-align: left; 
    font-size: 13px; 
    font-family: Arial,sans-serif; 
    vertical-align: middle; 
    -moz-appearance:none; 
    text-indent: 0.01px; 
    text-overflow: ''; 
} 

select::-ms-expand { 
    display:none; 
} 

html.lt-ie10 select { 
    background-image:none; 
    height:32px; 
    padding-right: 6px; 
    border-right: 1px solid; 
}

當Chrome瀏覽器自動填充我的形式（這是你的標準問題的名稱，地址，國家，和信用卡信息的形式），任何自動填充的字段都會獲得淺黃色背景色。問題是，不過它設法隱藏了我的background-image指令。如果我滾動頁面，或者在任何字段中單擊，下拉圖片就會直接返回。

前：

Before Autocomplete

後：

After Autocomplete

我首先想到的是，我只是需要給選擇position:relative和z-index但這並沒有改變任何東西。我想我可以嘗試禁用自動完成，但會降低用戶的預期體驗。然後我認爲在背景圖片上設置!important就可以了，因爲Chrome可能會將樣式表應用到它上面，暫時覆蓋我的圖片。納達。通過jQuery將焦點設置到另一個字段（或同一個字段）不起作用（至少在開發人員工具控制檯中沒有）。一個超級醜陋的黑客應該是捕獲該自動完成事件（如果可能的話;並且不，我不是爲此安裝jQueryUI），然後使用window.scrollBy(0,1);window.scrollBy(0,-1)快速向上和向下滾動，重新繪製控件而不強制進行完整的css刷新（並且基於控制檯測試，實際上並不會移動屏幕）。但我無法弄清楚如何捕捉自動完成事件，我寧願不在任何模糊情況下開火......即使我是在模糊的情況下做到這一點，它仍然不能解決這樣一個事實，即單純的顯示自動完成下拉菜單會顯示黃色背景並破壞樣式。

在我的CSS中是否有東西導致這種情況發生？還是我必須依靠JavaScript來彌補Chrome的愚蠢？

來源

2014-06-13 mounty

看看這個解決方案http://stackoverflow.com/questions/27987624/changing-input-background-for-chrome-autocomplete#42899873，它似乎工作。 –

可以使用擺脫黃色背景的：

if (navigator.userAgent.toLowerCase().indexOf("chrome") >= 0) { 
$(window).load(function(){ 
    $('input:-webkit-autofill').each(function(){ 
     var text = $(this).val(); 
     var name = $(this).attr('name'); 
     $(this).after(this.outerHTML).remove(); 
     $('input[name=' + name + ']').val(text); 
    }); 
}); 
}

來源

2014-06-13 15:19:00 user2313440

添加此代碼對此問題沒有明顯影響。事實上，調試控制檯，它似乎永遠不會運行。 if塊的作品; jquery選擇器返回控件;但'.each（）'函數中的斷點從未被擊中。在任何情況下，黃色背景都不是嚴格的問題;事實上，我選擇的箭頭在自動完成過程中消失，除非屏幕重新粉刷，否則不會再出現。 – mounty

chrome autocomplete破解樣式選擇

回答

相關問題