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!

Kawinesh S K · Accepted Answer · 2014-03-25 10:40:34Z

56

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, 2014 at 10:40

Kawinesh S K

3,2301 gold badge19 silver badges30 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Gaurav Manral Over a year ago

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

Mahdi Afzal · Accepted Answer · 2017-07-05 10:19:13Z

21

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.

answered Jul 5, 2017 at 10:19

Mahdi Afzal

86711 silver badges14 bronze badges

2 Comments

Matt K Over a year ago

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

JPG Over a year ago

This deserves to be the checked answer. Worked fine!

score -3 · Accepted Answer · 2014-03-25 10:50:34Z

-3

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

This would work for you!

edited Mar 25, 2014 at 10:50

answered Mar 25, 2014 at 10:40

user3401408

4 Comments

Ruddy Over a year ago

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

user3401408 Over a year ago

@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 Over a year ago

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.

user3401408 Over a year ago

@Ruddy: Thanks, quite useful for me :)

Collectives™ on Stack Overflow

Change font color of autofill input field

3 Answers 3

1 Comment

2 Comments

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

2 Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related