Chrome Browser versteckt Hintergrundbild im Eingabefeld auf AutoFill

Question

Ich habe Login-Popup auf einer Webseite. Das Login-Formular enthält zwei Felder Benutzername und Passwort. Beide Eingabefelder haben ein Hintergrundbild (dargestellt mit Hilfe von CSS).

Aber während der Anmeldung, AutoFill von Chrome Browser füllt Daten in den Formularfeldern und verbirgt Hintergrundbild, Bild wird auf der äußersten linken Seite der Eingabefelder angezeigt. Also, es ist nicht wie Text ist das Bild überschreiben.

Ich lese andere Antworten suggerieren bewegte Bild aus den Eingabefeldern. Ich brauche nur ein Bild im Eingabefeld. Welcher CSS- oder JS-Trick kann hier verwendet werden, um ein Hintergrundbild in einem Eingabefeld anzuzeigen, selbst wenn der Chrome-Browser automatisch ausgefüllt wird? Hier

ist, was ich versuche:

HTML:

<input class="form-text-inputs" 
     type="text" 
     name="password" 
     ng-pattern="ctrl.usernameRegex" 
     placeholder="{{'USER.PASSWORD_PLACEHOLDER' | translate}}" 
     ng-model="ctrl.password" 
     maxlength="50" 
     required> 

CSS:

input[type = 'password'] { 
    background-image: url(../assets/images/passwordimage.png) ; 

    padding-left: 36px; 
} 

Answer 1

Endlich die Lösung gefunden. So sieht es jetzt aus.

input[type = 'password'] { 
background-image: url(../assets/images/password.png) ; 
-webkit-appearance: none; 
padding-left: 36px;} 

input[type = 'password']:-webkit-autofill { 
background-image: url(../assets/images/password.png) ; 


-webkit-appearance: none; 
padding-left: 36px; 
-webkit-box-shadow: 0 0 0 1000px white inset !important; 

} 

Answer 2

Sie können durch Hinzufügen autocomplete="off" mit dem Eingangselement des Browsers in-built die automatische Vervollständigung deaktivieren .

<input class="form-text-inputs" 
     type="text" 
     name="username" 
     ng-pattern="ctrl.usernameRegex" 
     placeholder="{{'USER.USERNAME_PLACEHOLDER' | translate}}" 
     ng-model="ctrl.username" 
     maxlength="50" 
     required autocomplete="off"> 

Auch der CSS-Selektor ist falsch. Es sollte input[type=text] statt input[type=username] sein