Input, Textarea Autofill Background Color Change – CSS

Puneet Sharma

6 years ago

Autofill usually changes the background color but in some areas, we don’t want that default color, so this script is to change the default color.

Just add the following pseudo-selector to your style sheet and the background color will change according to your needs through ‘-webkit-box-shadow’.

This is

.headsearch__input:-webkit-autofill,
.headsearch__input:-webkit-autofill:hover,
.headsearch__input:-webkit-autofill:focus,
.headsearch__input:-webkit-autofill:active {
    border: 1px solid #999;
    -webkit-text-fill-color: #ffffff;
    -webkit-box-shadow: 0 0 0px 1000px #151718 inset;
    transition: background-color 5000s ease-in-out 0s;
}