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

Question

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

但在登录过程中，chrome 浏览器的自动填充会在表单字段中填充数据并隐藏背景图像，图像显示在输入字段的最左侧。因此，它不像文本是压倒一切的图像。

我阅读了其他建议从输入字段中移动图像的答案。我只需要输入框中的图像。 即使在 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=text] 而不是input[type=username]