Html Chrome浏览器在自动填充的输入框中隐藏背景图像

我有一个网页上的登录弹出窗口。登录表单包含两个字段用户名和密码。两个输入字段都有一个背景图像（在CSS的帮助下显示）

但在登录过程中，chrome浏览器的自动填充会填充表单字段中的数据并隐藏背景图像，图像显示在输入字段的最左侧。所以，它不像文本覆盖图像

我读了其他的答案，建议将图像移出输入字段。我只需要输入框中的图像。 在这里，哪种CSS或JS技巧可以用来在输入框中显示背景图像，即使是在Chrome浏览器的自动填充上

以下是我正在尝试的：

HTML:

---

通过向输入元素添加

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=text]

而不是

input[type=username]

最终找到了解决方案。这就是它现在的样子

    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;

}

设置autocomplete=“off”通常对chrome不起作用。签出此线程：

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

    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;

}