Chrome AutoFill versteckt Texteingabe Hintergrundbild

Question

Nachdem ich erfolgreich die gelbliche Hintergrundfarbe der Autofill, deaktiviert habe stolperte ich über eine andere Funktion.

Jedes meiner Eingabeelemente hat ein Hintergrundbild, und jedes Mal, wenn ich mich auf eine Texteingabe konzentriere, schlägt der Browser Werte vor, die ich zuvor in einer Dropdown-Liste verwendet habe.

Nachdem ich einen Wert ausgewählt habe, deckt die automatische Füllung meinen gesamten Hintergrund ab und blendet das Bild aus.

Hier ist meine HTML und CSS (erarbeitet 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

Was Sie brauchen, ist:

bewegen Hintergrundbild von <input> Element

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

und verschieben Ändern von Hintergrundfarbe, wenn autofill

CSS

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

Aktualisiert Ihre Geige: https://jsfiddle.net/65wkgqs0/6/