Remove forced yellow input background in Chrome

If you allow your browser to remember what you write into forms it will pre-fill these forms when visiting again. That’s very convenient. But Chrome forces a pale yellow background on all these input elements, likely messing up your design. And that background color cannot be overridden.

Some tester come to and ask me this is bug, can you resolve it. lot of times i will argu with them this is not bug, this is one of the feature in chrome. but he still not listion my side point. just he will ask to clear the that yellow background.

How to clear the yellow background auto input field in chrome browser.

input:-webkit-autofill {
background-color: #fff !important;
}

Now it should work! Nope, still nothing. And there’s the bug. Chrome forces that pale old yellow so hard on it’s pre-filled forms that it can’t be overridden. At least not by trying to set the background-color.

Let’s step up our game and think outside the box. By setting a “inset” box shadow for Webkit, and fill the entire input, we might solve the problem. With just one big solid color we would have the same effect as with a background color.

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

If you need to have fancy hover, focus-effects, then you can play around with these Chrome-specific design:

input:-webkit-autofill:hover
input:-webkit-autofill:focus

RECENT POSTS

Firefox CSS Hacks

admin
Wednesday, May 15th, 2019

Top 15 Web Design Trends 2018

admin
Friday, May 3rd, 2019