如何摆脱Chrome中的黄色自动完成填充器？

Question

我的网站上有此搜索框，chrome会建议您以前的搜索。但是，它会将搜索框染成黄色。我试图提出解决此问题的方法，但没有任何效果。但是，当我将代码重新粘贴到inspect元素的“源”选项卡中时，它将起作用！我相信chrome正在替换我的代码，然后检查替换了他们的代码，但是，我不知道如何阻止它替换我的代码。

我试图摆脱黄色，没有完全删除自动填充功能。

我的代码看起来像：，但是Chrome Inspect元素源看起来像是：

input[type=text]:-webkit-autofill {
  -webkit-box-shadow: 0 0 0 100px white inset;
}

<div class="Search1">
  <div class="inputWithIcon">
    <input type="text" placeholder="Channel ID" id="chnlname" class="Input2" :-webkit-autofill></input>
    <i class="fa fa-search" aria-hidden="true" id="update"></i>
  </div>
</div>

那是我目前正在使用的。

Answer 1

假设您想保留填充物，但可以根据自己的喜好更改颜色，那么请看一下这篇文章-对于您的问题，它应该是理想的选择：https://css-tricks.com/snippets/css/change-autocomplete-styles-webkit-browsers/

Answer 2

可能是:active状态导致黄色。记下Nathan White的技巧吧！

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