Zdjęcie z autouzupełnianiem ukrytego tekstu ukrytego w przeglądarce Chrome

Question

Po pomyślnym wyłączeniu żółtego koloru tła autouzupełniania, natknąłem się na inną funkcję.

Każdy z moich elementów wejściowych ma obraz tła, a za każdym razem, gdy koncentruję się na wprowadzaniu tekstu, przeglądarka sugeruje wartości używane wcześniej na rozwijanej liście.

Po wybraniu wartości autofill pokrywa całe moje tło i ukrywa obraz.

Oto mój html i css (opracowany w JSfiddle):

<section class="formContainer"> 
    <img class="sesameLogo" src="~/Content/Images/Site/sesamelogo.png" /> 
    <form id="signUpForm" class="pageForm"> 
     <input type="text" name="decoy" class="decoy"/> 
     <input type="password" name="decoy" class="decoy" /> 
     <input type="text" placeholder="Full Name" name="FullName" id="fullName" /> 
     <input type="text" placeholder="Email" name="email" id="email" /> 
     <input type="password" placeholder="Password" name="password" id="password" /> 
     <input type="password" placeholder="Confirm Password" name="confirmPassword" id="secPassword" /> 
     <section id="actionBtnsCont"> 
      <button id="btnSignUp" class="mainBtn" type="button">Sign Up</button> 
      <label class="genContextLbl">or</label> 
      <button id="btnSignIn" class="genBtn" type="button">Sign In</button> 
     </section> 
    </form> 
</section> 

https://jsfiddle.net/65wkgqs0/

Answer 1

czego potrzebujesz to:

ruch tła z <input> elementem

HTML

<div class="email-wrapper"> 
    <input type="text" placeholder="Email" name="email" id="email" /> 
</div> 

CSS

.email-wrapper { 
    display: inline-block; 
    background: url(https://www.apec-econ.ca/system/style/images/icon-small-person.png) no-repeat scroll 4px 9px; 
} 

i odłożyć na zmienianie background-color kiedy autofill

CSS

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

zaktualizowaniu skrzypce: https://jsfiddle.net/65wkgqs0/6/