0

Is there any way how to setup background image on input auto fill? I need cross-browser version and mobile as well.

I found some answers, but nothing really works for me, see Add background image to input fields with Autofill in mobile browsers - default yellow background removes them or Chrome hiding background image with autofills

this is my for select

 background-image: url(img.png);

and for select:-webkit-autofill i got same code

    background-image: url(img.png) !important;

But on autofill I get default look, with yellow background...but if I look on user-agent style, the background-image: none; is overwritten by my image. I tried to set background: transparent; for select, but that did nothinig.

Community
  • 1
  • 1
Honza
  • 323
  • 3
  • 14
  • try this http://stackoverflow.com/questions/20490856/show-background-image-in-the-input-text-field – themich Oct 10 '15 at 18:19
  • thanks for answer, but it does not work on autofill. I edited my original post. I get the default look with yellow background and no image. – Honza Oct 10 '15 at 20:09

1 Answers1

0

So after hours of work I found a workaround: Instead of setting background image to the input itself, set it to div directly above the input (the dive has exactly same width and height) and set transparent background color to the input. And then after autofill happens, set this to input:-webkit-autofill:

transition: background-color 5000s ease-in-out 0s

Here is jsfiddle

https://jsfiddle.net/ju3g47jh/8/

Here is another thread that might help: Removing input background colour for Chrome autocomplete?

Community
  • 1
  • 1
Honza
  • 323
  • 3
  • 14