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

我在网页上登录弹出窗口。登录表单包含用户名和密码两个字段。两个输入字段都有一个背景图片（在CSS的帮助下显示）。Chrome浏览器在自动填充的输入框中隐藏背景图像

但是在登录时，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; 
}

来源

2016-07-24 Deepak

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

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; 

}

来源

2016-07-24 12:45:41 Deepak

它不起作用。它只是覆盖背景颜色，而不是背景图像。 – shaosh

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

来源

2016-07-24 11:36:51

设置自动完成=“关闭”通常不会很好地发挥。结帐这个线程：http://stackoverflow.com/questions/12374442/chrome-browser-ignoring-autocomplete-off –

谢谢纠正了这个错误。更新了我的问题。此外autocomplete =“off”在这种情况下似乎并没有帮助我。 – Deepak

好的，为什么你不想使用输入框中的图像？ –

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

回答

相关问题