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

您可以通过向输入元素添加 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]