オートフィルの入力ボックスにChromeブラウザの背景画像が表示されない

Question

ウェブページにログインポップアップがあります。ログインフォームには、usernameとpasswordという2つのフィールドがあります。どちらの入力フィールドも背景画像を持っています（CSSの助けを借りて表示）。

ログイン中、クロームブラウザの自動入力はフォームフィールドにデータを入力し、背景画像を非表示にします。画像は入力フィールドの左端に表示されます。だから、そのようなテキストはイメージを無効にすることではありません。

私は、入力フィールドから動画が外れていることを示唆するその他の回答を読んでいます。入力ボックスにのみ画像が必要です。 Chromeブラウザの自動入力でも、入力ボックスに背景画像を表示するのに、CSSやJSのトリックを使用できますか？ここで

は、私がしようとしているものです：

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

最後に解決策が見つかりました。

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

あなたが入力要素にautocomplete="off"を追加することで、ブラウザの内蔵オートコンプリートをオフにすることができます。

<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"> 

また、CSSセレクタが間違っています。 input[type=username]の代わりにinput[type=text]にする必要があります。