如何在chrome自动完成上删除蓝色背景

Posted 2023-02-21

【中文标题】如何在chrome自动完成上删除蓝色背景

【英文标题】：how to remove blue background on chrome autocomplete

【发布时间】：2019-08-03 13:02:02

【问题描述】：

我正在制作一个表单并希望每个输入都是透明的，但是当我使用 Chrome 中的自动完成功能然后 Tab 进入下一个字段时，前一个字段会变成淡蓝色背景。

我尝试过使用：

input:-webkit-autofill:focus 
    -webkit-box-shadow: 0 0 0 30px white inset !important;
    transition: background-color 5000s ease-in-out 0s;
  

但这不起作用。我不想要白色背景我希望它在单击另一个输入时保持透明并将color 设置为transparent 也不起作用。

如何做到这一点？

【参考方案1】：

Google 似乎对 shadow 属性做了一些神奇的事情。这使它对我有用：

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover,
textarea:-webkit-autofill:focus,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus 
  -webkit-box-shadow: 0 0 0px 1000px #ffffff inset !important;

【参考方案2】：

您可能无法使用 CSS 在 Chrome 上将其删除。最近这变得越来越困难，因为谷歌对开发人员试图隐藏或操纵他们面向消费者的功能的所有方式都很感兴趣。至少他们最近改为蓝色背景而不是黄色。为了完全避免我发现的唯一方法是使用隐身窗口或访客窗口。