如何摆脱 Chrome 中的黄色自动填充剂？

Question

I have this search box on my website, chrome suggests past searches. However, it dye's the search box yellow. I have tried to suggest ways to fix this and nothing works. However When I paste my code back in the sources tab of inspect element it works! I believe chrome is replacing my code, and then inspect replaces theirs, however, I don't know how to stop it from replacing mine.

I am trying to get rid of the yellow, not fully delete the autocomplete feature.

My Code Looks Like: However Chrome Inspect Element Sources Looks Like:

 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>

Thats what I am currently using.

Answer 1

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

Answer 2

Could be the :active state is causing the yellow. Credit to Nathan White for this trick:

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