18

When I write in the email box the email, I have no problem and displays perfectly. But when google chrome decides to autofill, the image on the left is removed. http://s9.postimg.org/suz3z56f3/Sem_t_tulo.jpg

I've read some topics about hacking that yellow background, which works, but the image continues to disappear.

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/ > example, but no showing the error because I can't replicate the autofill of chrome in jsfiddle.

4

8 Answers 8

8

Puts the image back using keyframes:

@-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;
}

Kudos to @Steve for his answer to Removing input background colour for Chrome autocomplete?

2
  • 4
    This is not working for me! :( Jan 21, 2022 at 8:09
  • Dang. I guess they changed something with Chrome @KhushbuVaghela, sorry :/
    – wkille
    Jun 27, 2022 at 10:08
6

I'm posting a solution here, essentially as a hack / workaround for the problem described.

Using extra elements we can place the icon on the input element.

Preview: http://output.jsbin.com/necigedago

Working Example:

enter image description here

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>
2

It is very inconvenient practice to use background images for textboxes. you can change your HTML markup

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
}

I have updated the code: jsFiddle

2

Only option is to remove the padding where the background image would have been in webkit but you can style as such:

/* 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;
}

The image will still work for IE, FF, etc... but for chrome will overide.

Best-

2

Use animate to solve this matter is the most useful way!

kudos to @wkille for his answer: https://stackoverflow.com/a/51874418/11720087

You can set a animation like this:

@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. */
}
1

I found a better solution to this.

For new Chrome versions, you can just put autocomplete="new-password" in your password field and that's it. I've checked it, works fine.

1

You just need to add autocomplete="off" to your input field and this will solved the issue. I tried it and it works.

0

I found another solution which should solve the problem using JavaScript. Add the onchange to your input element, and use following function. I'm using this along with the CSS rules input:focus:invalid and input:required:valid to show different background images based on if the input is valid or not valid.

Works in Chrome and Firefox, but not for Safari it seems :(

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);
  }

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.