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!

score 47 · Accepted Answer · answered Mar 25 '14 at 10:40

47

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

answered Mar 25 '14 at 10:40

Kawinesh S K

3,148
1
16
29

this code works but only for mozila. How can we do this for chrome..?? – Gaurav Manral Jan 20 '15 at 06:16

score 16 · Answer 2 · answered Jul 05 '17 at 10:19

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.

This is the most complete answer I have seen that solves this problem. Thank you! — Matt K, Sep 13 '18 at 22:32

score -3 · Answer 3 · 2014-03-25T10:50:34.920

-3

input:-webkit-autofill {
    color: #999 !important;
}

This would work for you!

edited Mar 25 '14 at 10:50

answered Mar 25 '14 at 10:40

1

You didn't even do it correctly.... Also no, don't use `!important`. **Note:** It's like this - `color: #999 !important;` – Ruddy Mar 25 '14 at 10:41
@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. – Mar 25 '14 at 10:52
1

Take a look at this [**page**](http://css-tricks.com/when-using-important-is-the-right-choice/). 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. – Ruddy Mar 25 '14 at 10:57
4

@Ruddy: Thanks, quite useful for me :) – Mar 25 '14 at 11:34

Change font color of autofill input field

3 Answers3

Linked