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

您可以通过将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]

Answer 2

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

    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;

}

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

2 个答案: