如何更改Safari自動填充黃色背景色

Question

該圖像是我從野生動物園獲得的：

這是我的代碼：

資料來源：

如何刪除WebKit的香蕉黃色自動填充背景

刪除Chrome中的強制黃色輸入背景 -即使它顯示為chrome，但仍指向webkit-autofill

我曾嘗試使用background-color:white !important; 覆蓋鎖定的CSS。 調試工具顯示用戶代理樣式表的背景色已划掉，但是顏色沒有改變，並且使用了自定義。

那真的讓我感到困惑，我不知道為什么不允許更改用戶代理樣式表。

Answer 1

正在讀取的大多數瀏覽器都希望指示自動填充（Safari對此指示更加堅定）。

我確實找到了另一種方法hack ，其中您使用了-webkit-box-shadow來覆蓋背景色。 經檢查，嘗試以類為目標的特定輸入無效（即，特定性）。

在Safari（10.0.2）中，瀏覽器將shadow content添加為用戶代理，其中包括背景色和自動填充的值。 這里的問題是，瀏覽器禁止編輯那些特定的樣式（例如background-color ），因此下面給出了答案的原因。

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

如果您在輸入中也有一個邊框底

input:-webkit-autofill, input:-webkit-autofill:focus {
  border-bottom: 1px solid #333;
}

資源：
- 中級職位
-stackoverflow討論
- 為什么瀏覽器忽略autocomplete =“ off”

Answer 2

我發現，包括-webkit-box-shadow和background-color在內的解決方案僅在Google Chrome瀏覽器中起作用，而在Safari中不起作用。 對我有用的是添加background-clip: content-box 。 最后，代碼（適用於所有瀏覽器）如下所示：

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active  {
    -webkit-box-shadow: 0 0 0 60px #fafafa inset !important;
    background-color: #fafafa !important;
    background-clip: content-box !important;
}