Change font color of autofill input field

Question

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!

Solution 1

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;
}

Solution 2

Try the below CSS:

/* Change Autocomplete styles in Chrome*/
input:-webkit-autofill,
input:-webkit-autofill:hover, 
input:-webkit-autofill:focus
input:-webkit-autofill, 
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover
textarea:-webkit-autofill:focus,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus {
  border: 1px solid green;
  -webkit-text-fill-color: green;
  -webkit-box-shadow: 0 0 0px 1000px #000 inset;
  transition: background-color 5000s ease-in-out 0s;
}

We can use the -webkit-autofill pseudo-selector to target those fields and style them as we see fit.

Comments

[Ruddy]

You didn't even do it correctly.... Also no, don't use !important. Note: It's like this - color: #999 !important;

[Admin]

@Ruddy:Thanks,I have updated my answer. Could you please tell me, why we should not use important? I'm not much familiar with css, but I knw the answer, so replied.

[Ruddy]

Take a look at this page. Its a good little read. For this I don't feel there is a need to use !important just feels lazy when there are another ways to do it.

[Admin]

@Ruddy: Thanks, quite useful for me :)

[Gaurav Manral]

this code works but only for mozila. How can we do this for chrome..??

[Matt K]

This is the most complete answer I have seen that solves this problem. Thank you!

[JPG]

This deserves to be the checked answer. Worked fine!