How to Get Rid of Yellow Background in Form Fields for Google Chrome and Safari for Mac

One of my old clients came to me today and says that the form fields on his login page have a yellow background color. He has a WordPress site and I know I had never seen yellow on this login page form before. I use a PC not a Mac, so I never noticed that this problem was present when using Safari on Mac. I’ve also read it happens with Google Chrome. I’m not sure if it happens on PC, but know it does on Macs. Here is the solution, simply add the following code to a style sheet connected to the page. In my case, since it was a wordpress site, I added it to my main theme’s style.css file:

input:-webkit-autofill {
    -webkit-box-shadow:0 0 0 50px white inset; /* Change the color to your own background color */
    -webkit-text-fill-color: #333;
}
input:-webkit-autofill:focus {
    -webkit-box-shadow: /*your box-shadow*/,0 0 0 50px white inset;
    -webkit-text-fill-color: #333;
}

One Reply to “How to Get Rid of Yellow Background in Form Fields for Google Chrome and Safari for Mac”

Leave a Reply

Your email address will not be published. Required fields are marked *