我有一個登錄表單，有兩個字段，用戶名和密碼。用戶名字段由chrome自動完成。當我提交表單時(當它有效時)，這個樣式被神秘地應用:

input:-internal-autofill-selected {s ?
    background-color: rgb(232, 240, 254) !important;
    background-image: none !important;
    color: -internal-light-dark-color(black, white) !important;
}

有辦法避免這種情況嗎？表單是使用Ajax提交的，所以如果用戶名字段應用了這種樣式，但密碼字段沒有應用，就有點難看。

我注意到，只有當字段中填充了chrome sugggestions列表中的元素時，才會出現這種情況。如果字段中填充的值不在列表中，則不會應用該樣式。

問候 杰米

為了擺脫不良行為，這一招& quot剛剛好& quot(tm):

input:-webkit-autofill,
  input:-webkit-autofill:focus {
    transition: background-color 600000s 0s, color 600000s 0s;
  }

答案并不直觀。與其說這是一個詭計，不如說這是唯一有效的方法:

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

這將樣式一個黃色背景給你輸入。基本上是一種非常不透明，壓倒性的內心陰影。他們在@ravb79發送的鏈接中使用了相同的技巧。

如果你對淺色主題的默認-內部-自動填充-選擇樣式沒問題，只是想讓它在深色主題中看起來更好，那么你可能只需要:

input {
  color-scheme: dark;
}

你可以添加一個方框陰影來去除藍色背景

box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0), inset 0 0 0 100px rgba(255, 255, 255,1);

我試圖改寫風格，但由于某種原因，它根本不起作用。Webkit或者至少chrome忽略了這種風格。

我補充的時候！webkit / chrome風格的重要之處在于，它完全脫離了等式。在元素檢查器中看不到。

我嘗試的一切要么被忽略，要么被刪除。

所以，我想出了這個可怕的廢話。但到目前為止還行。

// Fix autocomplete shit
function fix_autocomplete_shit() {
    setTimeout(() => {
        if ($(this).is(':-internal-autofill-selected')) {
            var clone = $(this).clone(true, true);
            $(this).after(clone);
            $(this).remove();
        }
    }, 10);
}
$('.form-control').on('input', fix_autocomplete_shit);

我正在使用bootstrap，我想保持背景圖片形式的驗證圖標。

只有上帝知道為什么webkit的創造者認為他們絕對必須將背景圖像設置為無，但如果他們想要戰爭，他們可以擁有它。

您可以添加自己的CSS，使更新后的狀態與常規輸入狀態相匹配。將一個額外的類和！重要屬性應該覆蓋它。

所以:

input.my-input {
    background-color: rgb(255, 255, 255) !important;
    background-image: none !important;
    color: rgb(0, 0, 0) !important;
}

input.my-input:-internal-autofill-selected {
    background-color: rgb(255, 255, 255) !important;
    background-image: none !important;
    color: rgb(0, 0, 0) !important;
}

我還找到了這個btw:https://CSS-tricks . com/snippets/CSS/change-autocomplete-styles-WebKit-browsers/

我稍微調整了一下@kostiantyn-ko的回答，只適用于無效輸入。

薩斯:

input {
  &:is(:invalid, [aria-invalid=true]) {
    // your error styles
    background-color: var(--color-background-critical-subdued);
    border: 1px solid var(--color-border-critical-subdued);

    // hack needed to get rid of autofill styles only on invalid forms
    &:is(:-webkit-autofill, :-webkit-autofill:focus) {
      transition: background-color 600000s 0s, color 600000s 0s;
    }
  }
}

CSS:

/* your error styles */
input:is(:invalid, [aria-invalid=true]) {
  background-color: var(--color-background-critical-subdued);
  border: 1px solid var(--color-border-critical-subdued);
}

/* hack needed to get rid of autofill styles only on invalid forms */
input:is(:invalid, [aria-invalid=true]):is(:-webkit-autofill, :-webkit-autofill:focus) {
  transition: background-color 600000s 0s, color 600000s 0s;
}

這種方式應該可行(記得根據需要切換風格):

input:-webkit-autofill,
input:-webkit-autofill:hover, 
input:-webkit-autofill:focus {
    border: 1px solid rgba(255, 255, 255, 0.25);
    -webkit-text-fill-color: #000;
    -webkit-box-shadow: 0 0 0px 1000px rgb(232, 240, 254) inset;
    transition: background-color 5000s ease-in-out 0s;
}