删除Chrome自動完成功能的輸入背景色？

在我正在處理的表單上，Chrome浏覽器會自動填寫電子郵件和密碼字段。 很好，但是Chrome将背景顔色更改為淺黃色。

我正在研究的設計是在深色背景上使用淺色文本，是以這确實弄亂了表單的外觀-我有明顯的黃色框和幾乎看不見的白色文本。 聚焦後，場将恢複正常。

是否可以停止Chrome更改這些字段的顔色？

#1樓

目前可能的解決方法是在内部陰影中設定“強”的陰影：

input:-webkit-autofill {
    -webkit-box-shadow:0 0 0 50px white inset; /* Change the color to your own background color */
    -webkit-text-fill-color: #333;
}

input:-webkit-autofill:focus {
    -webkit-box-shadow: /*your box-shadow*/,0 0 0 50px white inset;
    -webkit-text-fill-color: #333;
}  
           

#2樓

這可以正常工作，您可以在輸入框内更改輸入框樣式以及文本樣式：

在這裡您可以使用任何顔色，例如

white

，

#DDD

，

rgba(102, 163, 177, 0.45)

#DDD

rgba(102, 163, 177, 0.45)

。

但是

transparent

在這裡行不通。

/* Change the white to any color ;) */
input:-webkit-autofill,
input:-webkit-autofill:hover, 
input:-webkit-autofill:focus, 
input:-webkit-autofill:active  {
    -webkit-box-shadow: 0 0 0 30px white inset !important;
}
           

此外，您可以使用它來更改文本顔色：

/*Change text in autofill textbox*/
input:-webkit-autofill {
    -webkit-text-fill-color: yellow !important;
}
           

建議：不要使用成百上千的模糊半徑。 這沒有任何好處，并且可能會使處理器負載在較弱的移動裝置上。 （對于實際的外部陰影也是如此）。 對于高度為20px的普通輸入框，可以完美覆寫30px的“模糊半徑”。

#3樓

如前所述，對我來說，插入-webkit-box-shadow效果最佳。

/* Code witch overwrites input background-color */
input:-webkit-autofill {
     -webkit-box-shadow: 0 0 0px 1000px #fbfbfb inset;
}
           

還要編寫代碼段來更改文本顔色：

input:-webkit-autofill:first-line {
     color: #797979;
}
           

#4樓

我放棄！

由于無法通過自動完成功能更改輸入的顔色，是以我決定使用jQuery将其全部禁用以用于Webkit浏覽器。 像這樣：

if (/webkit/.test(navigator.userAgent.toLowerCase())) {
    $('[autocomplete="on"]').each(function() {
        $(this).attr('autocomplete', 'off');
    });
}
           

#5樓

Daniel Fairweather的解決方案（要删除Chrome自動完成功能的輸入背景色？ ）（我很想贊成他的解決方案，但仍需要15個代表）效果很好。 大多數提議的解決方案之間确實存在巨大差異：您可以保留背景圖檔！ 但是稍作修改（隻需Chrome檢查）

您需要記住， 它僅适用于可見區域 ！

是以，如果您在表單中使用$ .show（），則需要在show（）事件後運作此代碼。

我的完整解決方案（我有一個用于登入表單的顯示/隐藏按鈕）：

if (!self.isLoginVisible()) {
        var container = $("#loginpage");
        container.stop();
        self.isLoginVisible(true);
        if (navigator.userAgent.toLowerCase().indexOf("chrome") >= 0) {

            var documentForms = document.forms;
            for (i = 0; i < documentForms.length; i++) {
                for (j = 0; j < documentForms[i].elements.length; j++) {
                    var input = documentForms[i].elements[j];

                    if (input.type == "text" || input.type == "password" || input.type == null) {
                        var text = input.value;
                        input.focus();
                        var event = document.createEvent('TextEvent');
                        event.initTextEvent('textInput', true, true, window, 'a');
                        input.dispatchEvent(event);
                        input.value = text;
                        input.blur();
                    }
                }
            }
        }

    } else {
        self.hideLogon();
    }
           

再次抱歉，我希望将其作為評論。

如果您願意，我可以在我使用它的網站上放置一個連結。

#6樓

沒有一種解決方案對我有用，插入陰影對我不起作用，因為輸入具有覆寫頁面背景的半透明背景。

是以我問自己：“ Chrome如何确定在給定頁面上應自動填充的内容？”

“它會查找輸入ID，輸入名稱嗎？表單ID？表單動作？”

通過對使用者名和密碼輸入的實驗，發現隻有兩種方法會導緻Chrome無法找到應自動填充的字段：

1）将密碼輸入置于文本輸入之前。 2）給他們相同的名稱和ID ...或根本不給名稱和ID。

頁面加載後，可以使用javascript動态更改頁面上輸入的順序，也可以動态為其提供名稱和ID。

而且Chrome不知道該怎麼擊...自動完成功能已損壞！

瘋狂破解，我知道。 但這對我有用。

Chrome 34.0.1847.116，OSX 10.7.5

#7樓

除此之外：

input:-webkit-autofill{
-webkit-box-shadow: 0 0 0px 1000px white inset;
}
           

您可能還想添加

input:-webkit-autofill:focus{
-webkit-box-shadow: 0 0 0px 1000px white inset, 0 0 8px rgba(82, 168, 236, 0.6);
}
           

否則，當您單擊輸入時，黃色将重新出現。 對于焦點，如果您使用的是引導程式，則第二部分用于突出顯示邊框0 0 8px rgba（82，168，236，0.6）;

這樣，它将看起來像任何引導輸入。

#8樓

由于這種着色行為來自WebKit，是以已按設計進行了設計。 它使使用者可以了解已預填充的資料。 錯誤1334

您可以執行以下操作（或在特定的表單控件上關閉自動完成功能：

<form autocomplete="off">
...
</form
           

或者，您可以通過執行以下操作來更改自動填充的顔色：

input:-webkit-autofill {
    color: #2a2a2a !important;
}
           

請注意，正在跟蹤一個錯誤，該漏洞可以再次運作： http : //code.google.com/p/chromium/issues/detail?id=46543

這是WebKit的行為。

#9樓

對于使用指南針的使用者：

@each $prefix in -webkit, -moz {
    @include with-prefix($prefix) {
        @each $element in input, textarea, select {
            #{$element}:#{$prefix}-autofill {
                @include single-box-shadow(0, 0, 0, 1000px, $white, inset);
            }
        }
    }
}
           

#10樓

我有一個更好的解決方案。

将背景設定為如下所示的另一種顔色并不能解決我的問題，因為我需要一個透明的輸入字段

-webkit-box-shadow: 0 0 0px 1000px white inset;
           

是以，我嘗試了其他一些方法，然後想到了：

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
    transition: background-color 5000s ease-in-out 0s;
}
           

#11樓

以上所有答案均有效，但确實有其錯誤。 下面的代碼是上面兩個答案的結合，可以完美工作而不會閃爍。

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
    transition: background-color 5000s ease-in-out 0s;
    -webkit-box-shadow: 0 0 0px 1000px #fff inset;
}
           

#12樓

這是我的解決方案，我使用了過渡和過渡延遲，是以我可以在輸入字段上使用透明背景。

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
    -webkit-transition: "color 9999s ease-out, background-color 9999s ease-out";
    -webkit-transition-delay: 9999s;
}
           

#13樓

試試這個：與上面的@ Nathan-white答案相同，但有一些細微調整。

/* For removing autocomplete highlight color in chrome (note: use this at bottom of your css file). */

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
    transition: all 5000s ease-in-out 0s;
    transition-property: background-color, color;
}
           

#14樓

薩斯

input:-webkit-autofill

  &,
  &:hover,
  &:focus,
  &:active
    transition-delay: 9999s
    transition-property: background-color, color
           

#15樓

試試這個隐藏自動填充樣式

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:active,
input:-webkit-autofill:focus {
    background-color: #FFFFFF !important;
    color: #555 !important;
    -webkit-box-shadow: 0 0 0 1000px white inset !important;
    -webkit-text-fill-color: #555555 !important;
    }
           

#16樓

我有一個問題，我不能使用盒子陰影，因為我需要輸入字段透明。 這有點hack，但是純CSS。 将過渡設定為非常長的時間。

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
transition: background-color 50000s ease-in-out 0s, color 5000s ease-in-out 0s;
}
           

#17樓

先前添加盒形陰影的解決方案非常适合需要純色背景的人。 添加過渡的另一種解決方案是可行的，但是必須設定持續時間/延遲意味着它将在某個時候再次顯示。

我的解決方案是改用關鍵幀，這樣它将始終顯示您選擇的顔色。

@-webkit-keyframes autofill {
    to {
        color: #666;
        background: transparent;
    }
}

input:-webkit-autofill {
    -webkit-animation-name: autofill;
    -webkit-animation-fill-mode: both;
}
           

Codepen示例： https ：//codepen.io/-Steve-/pen/dwgxPB

#18樓

不幸的是，上述解決方案在2016年（問題提出的第二年）對我沒有任何作用

是以，這是我使用的主動解決方案：

function remake(e){
    var val = e.value;
    var id = e.id;
    e.outerHTML = e.outerHTML;
    document.getElementById(id).value = val;
    return true;
}

<input id=MustHaveAnId type=text name=email autocomplete=on onblur="remake(this)">
           

基本上，它在儲存值的同時删除标簽，然後重新建立它，然後放回該值。

#19樓

這是完成此任務的複雜解決方案。

#20樓

如果您想防止Google chrome自動填充但它有點“彎刀”，我有一個解決方案，隻需删除google chrome添加到這些輸入字段的類，然後将值設定為“”即可（如果您不需要顯示）加載後存儲資料。

$(document).ready(function () {
    setTimeout(function () {
            var data = $("input:-webkit-autofill");
            data.each(function (i,obj) {
            $(obj).removeClass("input:-webkit-autofill");
                    obj.value = "";
            });
    },1);           
});
           

#21樓

簡單，隻需添加，

autocomplete="new-password"
           

到密碼字段。

#22樓

經過2個小時的搜尋，似乎Google仍然以某種方式覆寫了黃色，但我為此提供了解決方案。 那就對了。 它也将适用于懸停，聚焦等。 您所要做的就是在其中添加！important。

input:-webkit-autofill,
 input:-webkit-autofill:hover,
 input:-webkit-autofill:focus,
 input:-webkit-autofill:active {
 -webkit-box-shadow: 0 0 0px 1000px white inset !important;
  }
           

這将完全消除輸入字段中的黃色

#23樓

如果您想保持自動完成功能不變，可以使用一些jQuery删除Chrome的樣式。 我在這裡寫了一篇簡短的文章： http : //www.benjaminmiles.com/2010/11/22/fixing-google-chromes-yellow-autocomplete-styles-with-jquery/

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);
    });
});}
           

#24樓

Google Chrome使用者代理會阻止開發人員使用

CSS

，是以要更改

autofill

UI必須使用以下其他屬性：

input:-webkit-autofill,
textarea:-webkit-autofill,
select:-webkit-autofill {
    -webkit-box-shadow: 0 0 0 1000px #d500ff inset !important;
    /*use inset box-shadow to cover background-color*/
    -webkit-text-fill-color: #ffa400 !important;
    /*use text fill color to cover font color*/
}
           

#25樓

我有一個使用CSS過濾器的純CSS解決方案。

filter: grayscale(100%) brightness(110%);
           

灰階濾鏡将黃色替換為灰色，然後亮度消除了灰色。

請參閱CODEPEN

#26樓

這為我工作：

padding: 5px;
background-clip: content-box;
           

#27樓

這将适用于輸入，文本區域，并在正常，懸停，焦點和活動狀态下進行選擇。

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover,
textarea:-webkit-autofill:focus,
textarea:-webkit-autofill:active,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus,
select:-webkit-autofill:active,
{
    -webkit-box-shadow: 0 0 0px 1000px white inset !important;
}
           

這是針對使用SASS / SCSS的人員的上述解決方案的SCSS版本。

input:-webkit-autofill,
textarea:-webkit-autofill,
select:-webkit-autofill
{
    &, &:hover, &:focus, &:active
    {
        -webkit-box-shadow: 0 0 0px 1000px white inset !important;
    }
}
           

#28樓

這對我有用。

.input:-webkit-autofill {transition: background-color 5000s ease-in-out 0s;}

#29樓

增加一小時的延遲将暫停輸入元素上的所有CSS更改。

這比添加過渡動畫或内部陰影更好。

input:-webkit-autofill, textarea:-webkit-autofill, select:-webkit-autofill{
  transition-delay: 3600s;
}
           

#30樓

這對我有用（Chrome 76已測試）

input:-internal-autofill-selected {
    background-color: transparent;
}
           

#31樓

謝謝本傑明！

Mootools解決方案有點棘手，因為我無法通過使用

$('input:-webkit-autofill')

來擷取字段，是以，我使用了以下内容：

if (navigator.userAgent.toLowerCase().indexOf("chrome") >= 0) {

  window.addEvent('load', function() {
    setTimeout(clearWebkitBg, 20);
    var elems = getElems();
    for (var i = 0; i < elems.length; i++) {
      $(elems[i]).addEvent('blur', clearWebkitBg);
    }
  });
}
function clearWebkitBg () {
  var elems = getElems();
  for (var i = 0; i < elems.length; i++) {
    var oldInput = $(elems[i]);
    var newInput = new Element('input', {
      'name': oldInput.get('name'),
      'id': oldInput.get('id'),
      'type': oldInput.get('type'),
      'class': oldInput.get('class'),
      'value': oldInput.get('value')
    });
    var container = oldInput.getParent();
    oldInput.destroy();
    container.adopt(newInput);
  }
}
function getElems() {
  return ['pass', 'login']; // ids
}
           

#32樓

我已經開發了使用JavaScript而不使用JQuery的另一個解決方案。 如果您覺得這有用或決定重新釋出我的解決方案，我隻要求您輸入我的名字。 請享用。 –丹尼爾·費爾威瑟

var documentForms = document.forms;

for(i = 0; i < documentForms.length; i++){
    for(j = 0; j < documentForms[i].elements.length; j++){
        var input = documentForms[i].elements[j];

        if(input.type == "text" || input.type == "password" || input.type == null){
            var text = input.value;
            input.focus();
            var event = document.createEvent('TextEvent');
            event.initTextEvent('textInput', true, true, window, 'a');
            input.dispatchEvent(event);
            input.value = text;
            input.blur();
        }
    }
}
           

此代碼基于以下事實：輸入其他文本後，Google Chrome就會删除Webkit樣式。 僅僅更改輸入字段的值是不夠的，Chrome需要一個事件。 通過關注每個輸入字段（文本，密碼），我們可以發送鍵盤事件（字母“ a”），然後将文本值設定為其先前的狀态（自動填充的文本）。 請記住，此代碼将在每個浏覽器中運作，并将檢查網頁中的每個輸入字段，并根據您的需要進行調整。