2

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: enter image description here However Chrome Inspect Element Sources Looks Like: enter image description here

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.

MtnBros
  • 55
  • 5

1 Answers1

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;
}
Dan Devorkin
  • 61
  • 3