L'immagine di sfondo dell'inserimento di testo nascosto per il riempimento automatico di Chrome

Question

Dopo aver disabilitato correttamente il colore di sfondo giallastro della compilazione automatica, mi sono imbattuto in un'altra funzionalità.

Ciascuno dei miei elementi di input ha un'immagine di sfondo, e ogni volta che mi concentro su un input di testo, il browser suggerisce i valori che ho usato in precedenza in un elenco a discesa.

Dopo aver selezionato un valore, il riempimento automatico copre l'intero sfondo e nasconde l'immagine.

Ecco il mio html e css (elaborato in 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

Quello che vi serve è:

immagine di sfondo passaggio da <input> elemento

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; 
} 

e rinviare la modifica di background-color quando riempimento automatico

CSS

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

Aggiornato vostro violino: https://jsfiddle.net/65wkgqs0/6/