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

Posted 2023-03-05

【中文标题】谷歌浏览器自动填充删除背景图片

【英文标题】：Google Chrome autofill removing background image

【发布时间】：2014-02-19 13:28:05

【问题描述】：

当我在邮箱中写邮件时，我没有问题并且完美显示。 但是当谷歌浏览器决定自动填充时，左边的图像被删除了。 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 的自动填充。

【问题讨论】：

为什么不试试input:-webkit-autofill, .email \* existing .email styles *\

这不是我的答案。仍然希望它可以帮助***.com/questions/2920306/… [1]：***.com/questions/2920306/…

你有没有设法找到答案？

@blueprintChris 是的，人造元素是可能的。

【参考方案1】：

我找到了另一个解决方案，它应该使用 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);
  

【参考方案2】：

使用动画解决这个问题是最有用的方法！

感谢@wkille 的回答：https://***.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. */

【参考方案3】：

您只需将autocomplete="off" 添加到您的输入字段即可解决问题。我试过了，效果很好。

【参考方案4】：

使用关键帧放回图像：

@-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 对Removing input background colour for Chrome autocomplete?的回答

【讨论】：

这对我不起作用！ :(

【参考方案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

【参考方案6】：

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

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

预览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>

【参考方案7】：

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

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

【参考方案8】：

唯一的选择是删除背景图像在 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 将覆盖。

最好的-