Chrome的自动填充隐藏文本输入的背景图像

在成功禁用自动填充的黄色背景颜色后,我偶然发现了另一个功能.

我的每个输入元素都有一个背景图像,每当我专注于文本输入时,浏览器会在下拉列表中建议我之前使用的值.

选择一个值后,自动填充功能会覆盖整个背景并隐藏图像.

这是我的html和css(在JSfiddle中详细说明):

    
    

        
        
        
        
        
        
        

            Sign Up
            or
            Sign In
        
    

https://jsfiddle.net/65wkgqs0/

你需要的是:

从元素移动背景图像

HTML

CSS

.email-wrapper {
  display: inline-block;
  background: url(https://www.apec-econ.ca/system/style/images/icon-small-person.png) no-repeat scroll 4px 9px;
}

并在自动填充时推迟更改背景颜色

CSS

input:-webkit-autofill {
  transition: background-color 5000s ease-in-out 0s;
}

更新了你的小提琴:https://jsfiddle.net/65wkgqs0/6/