Google Chrome自动填充功能可删除背景图片

Question

当我在电子邮箱中写下电子邮件时,我没有任何问题并且显示完美.但是当谷歌浏览器决定自动填充时,左侧的图像将被删除. http://s9.postimg.org/suz3z56f3/Sem_t_tulo.jpg

我已经阅读了一些关于黑客攻击黄色背景的主题,但是图像仍在消失.

input:-webkit-autofill {
    -webkit-box-shadow: 0 0 0 1000px white inset;
}

// html

<input type='email' class='email' placeholder='email'/>

// css

.email{
    background-image: url('http://www.letsgocook.net/sites/default/img/email.png');
    background-repeat: no-repeat;
    padding-left: 35px;
}

http://jsfiddle.net/9AM6X/ >示例,但没有显示错误,因为我无法在jsfiddle中复制chrome的自动填充.

Answer 1

使用关键帧放回图像：

@-webkit-keyframes autofill {
    to {
        background-image:url(images/your-input-bg-image.svg);
    }
}

input:-webkit-autofill {
    -webkit-animation-name: autofill;
    -webkit-animation-fill-mode: both;
}

感谢@Steve 对移除 Chrome 自动完成输入背景颜色的回答？

Answer 2

我在这里发布了一个解决方案，本质上是作为所描述问题的一种破解/解决方法。

使用额外的元素，我们可以将图标放在输入元素上。

预览：http : //output.jsbin.com/necigedago

工作示例：

CSS

.control {
    position: relative;
}

.email {
    padding-left: 35px;
    padding-top: 10px;
    padding-bottom: 10px;
    font-size: 16px;
}

.email ~ .input-icon {
    background-image: url('http://www.letsgocook.net/sites/default/img/email.png');
    background-repeat: no-repeat;
    background-size: 100%;
    background-position: center center;
    width: 22px;
    height: 14px;
    position: absolute;
    left: 8px;
    bottom: 0;
    top: 0;
    margin: auto;
}

HTML

  <p class='control'>
    <input type='email' class='email' placeholder='email'/>
    <span class='input-icon'></span>
  </p>

Answer 3

使用文本框的背景图像是非常不方便的做法。您可以更改 HTML 标记

html

<div class='icon'></div>
<input type='email' class='email' placeholder='email'/>

CSS

.email {
    border:1px solid black;
    padding-left: 5px;
    float:left;
    border-left:none;
    outline:none ;
    margin-left:-3px
}

.icon {
    background-image: url('http://www.letsgocook.net/sites/default/img/email.png');
    background-repeat: no-repeat;
    background-position:center center ;
    float:left;
    width:30px;
    height:18px;
    margin-top:2px;
    border:1px solid black;
    border-right:none
}

我已经更新了代码：jsFiddle