在自动填充输入上删除黄色背景

Question

任何人都知道如何在自动填充时删除这个丑陋的铬背景？(参见下文.)

到目前为止我试过:

*:focus {
    outline: 0;
}
input:-webkit-autofill {
    -webkit-box-shadow: none;
    -webkit-text-fill-color: #fff !important;
}
button:focus, input:focus, a:focus {
    text-decoration: none !important;
    outline: none !important;
}

可悲的是,它们都不起作用.任何帮助,想法,线索,建议将不胜感激.

Answer 1

奇怪的是,这是webkit 的预期行为,让用户推断它是自动填充的.

ben@chromium.org我们从WebKit继承了这种着色行为,我相信它是设计的.它允许用户了解已预先填充的数据.

您可以使用:

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

这会将背景改为白色.

您还可以通过添加以下内容来关闭自动完成:

autocomplete="off"

例如

<input type="text" name="some_name" autocomplete="off"></input>

根据您的意见,但为了实用性,我建议不要这样做.

Answer 2

将其添加到标题中

input:-webkit-autofill,
input:-webkit-autofill:hover, 
input:-webkit-autofill:focus
input:-webkit-autofill, 
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover
textarea:-webkit-autofill:focus,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus {
  border:none !important;
  -webkit-text-fill-color: inherit !important;
  -webkit-box-shadow: 0 0 0px 1000px #FFFFFF inset;
  transition: background-color 5000s ease-in-out 0s;
}

这似乎可以解决黄色重新填充鼠洞的后遗症