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.

user3243925
  • 271
  • 2
  • 4
  • 12
  • 1
    why not try using `input:-webkit-autofill, .email { \* existing .email styles *\ }` – Pete Jan 28 '14 at 10:12
  • 1
    It is not my answer. Still hope it helps http://stackoverflow.com/questions/2920306/google-chrome-form-autofill-and-its-yellow-background [1]: http://stackoverflow.com/questions/2920306/google-chrome-form-autofill-and-its-yellow-background – sree Jan 28 '14 at 10:17
  • 1
    Did you ever manage to find an answer to this? – blueprintchris Nov 22 '16 at 14:41
  • 1
    @blueprintChris yes it is possible with faux elements. – AntonB Jan 10 '17 at 14:33

8 Answers8

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?

wkille
  • 543
  • 6
  • 12
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>
AntonB
  • 2,724
  • 1
  • 31
  • 39
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

Fabian Schultz
  • 18,138
  • 5
  • 49
  • 56
Taron Mehrabyan
  • 2,199
  • 2
  • 20
  • 27
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-

user5526644
  • 21
  • 2
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. */
}
Choumode
  • 21
  • 2
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.

Grasper
  • 1,293
  • 12
  • 26
1

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

Manuel Abascal
  • 5,616
  • 5
  • 35
  • 68
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);
  }
Henrik Granum
  • 1