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!

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

Answer 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.