谷歌浏览器自动填充删除背景图片

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

我在这里发布一个解决方案，基本上是针对所描述问题的黑客/解决方法。

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

Previe w： 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

唯一的选择是删除webkit中背景图像所在的填充，但您可以这样设置样式：

/* CHROME ISSUE W/ YELLOW BG */
input:-webkit-autofill#username,
input:-webkit-autofill#usernameId_new,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
-webkit-text-fill-color: #646464 !important;
-webkit-box-shadow: 0 0 0px 1000px #fff inset;
-webkit-padding-start: 8px !important;
}

该图像仍将适用于IE，FF等...但对于chrome将覆盖。

最好-

Answer 4

您只需要在输入字段中添加autocomplete="off" ，这将解决问题。 我尝试了它，它的工作原理。

Answer 5

将背景图像用于文本框是非常不方便的做法。 您可以更改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

Answer 6

我找到了一个更好的解决方案。

对于新的Chrome版本，您只需在密码字段中输入autocomplete="new-password"就可以了。 我检查过，工作正常。

Answer 7

使用animate来解决这个问题是最有用的方法！

感谢@wkille的回答： https ：//stackoverflow.com/a/51874418/11720087

您可以像这样设置动画：

@keyframes clearAutofill {
  to { background: 'Your-code'; }
  /* e.g background: url('./img/example.png') 0 0 no-repeat #fff; */
}

input:-webkit-autofill {
  animation: clearAutofill forwards;
  /* 'animation-fill-mode: forwards' can keep the style you set. */
}

Answer 8

我找到了另一个应该使用 JavaScript 解决问题的解决方案。 将 onchange 添加到您的输入元素，并使用以下功能。 我将它与 CSS 规则 input:focus:invalid 和 input:required:valid 一起使用，以根据输入是否有效显示不同的背景图像。

适用于 Chrome 和 Firefox，但似乎不适用于 Safari :(

CSS：

input:required:valid {
    background: url("IMAGE_PATH_HERE") no-repeat right;
    background-size: 25px;
    border: 3px solid green;
  }

input:focus:invalid {
    background: url("IMAGE_PATH_HERE") no-repeat right;
    background-size: 25px;
    border: 3px solid red;
  }

HTML：

<input type="text" name="name" id="name" autocomplete="name" onchange="fixAuto(this)" required>

JavaScript：

    /**
    * Adds background image to input fields if they are removed by the browser.
    *
    * @param element An input HTML element.
    */
  function fixAuto(element) {
    setTimeout(() => { 
      // Store the current value of the input field
      let value = element.value;

      // Store the element itself
      let input = document.getElementById(element.id);

      // Change the input fields value
      input.value = value;
    }, 0);
  }