CODEWITHSUNDEEP
htmlgoogle-chromeinputautocomplete
Avinash
Avinash

Reputation: 2005

Remove yellow input background in Chrome for transparent input

First of all I know questions regarding the Chrome yellow input background problem has been asked several times and there are lots of ways provided to override it.

But I am unable to make it work for me, as I am having form with transparent inputs. 

input:-webkit-autofill {
-webkit-box-shadow: 0 0 0px 1000px white inset;
}

The above code works perfectly for making the color of input white but when I give the following code it gives yellow as background.

input:-webkit-autofill {
-webkit-box-shadow: 0 0 0px 1000px rgba(0,0,0,.1) inset;
}

Is there any possible way of fixing this. Also autocomplete="off" on form dosenot solve my problem.

Adding a hidden input before the input field without name attribute removes the yellow but when I type a username the input background changes back to yellow.

Upvotes: 3

Views: 2348

Answers (2)

mdnfiras
mdnfiras

Reputation: 969

the auto-completed input in chrome always have a yellow background.

By using -webkit-box-shadow: 0 0 0px 1000px rgba(0,0,0,.1) inset; you are putting a black background with 10% visibility on top of the yellow background, wich will result in a litle bit darker yellow background.

And by using -webkit-box-shadow: 0 0 0px 1000px transparent inset; you are putting a transparent background on top of the yellow background, wich will change absolutely nothing.

You can either accept these results or use a 100% visible color like black, rgb(255, 255, 255), rgba(255, 255, 255, 1) or #000000

I think that the yellow background cannot be removed, you can only put another one on top of it, it's a bug I think, I never found a solution for it.

Upvotes: 2

Mdk
Mdk

Reputation: 512

I might be utterly wrong, but a workaround might be changing the input "name" attribute each time (adding a random string to it) so that the browser won't recognize it as the username field and won't trigger the autocorrection Then you could simply either use a substr() to cut away the random part or pass the random string as a form field and compose the POST array names with that

Upvotes: 1

Related Questions