HTML/CSS – Change Font Color of Autofill Input Field

csshtml

I've managed to change the background color of an autofilled input field from yellow to white with the following code:

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

However, changing the font color to grey simply by adding color: #999; doesn't work. How could I fix this? Many thanks!

Best Answer

Try the below CSS

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

Related Solutions

HTML/CSS – Override Browser Form-Filling and Input Highlighting

UPDATE: This doesn't work in the latest Chrome versions

Trick it with a "strong" inside shadow:

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: 0 0 0 50px white inset;/*your box-shadow*/
    -webkit-text-fill-color: #333;
}

HTML Forms – How to Remove Yellow Background on Input Autofill

Oddly enough this is the intended behaviour from webkit to let the user infer it was autofilled.

[email protected] We inherit this coloring behavior from WebKit and I believe it's by design. It allows the user to understand the data has been prefilled.

You can use:

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

Which will change the background to white.

You can also turn auto complete off by adding:

autocomplete="off"

E.g

<input type="text" name="some_name" autocomplete="off"></input>

To your input, but for usability I would suggest against this.

Best Answer

Related Solutions

HTML/CSS – Override Browser Form-Filling and Input Highlighting

HTML Forms – How to Remove Yellow Background on Input Autofill

Related Question