Change the text color of an input field with an autocompleted value

paulinhapenedo

Paula Penedo (she/her)

Posted on July 30, 2020

Change the text color of an input field with an autocompleted value

Webkit-based browsers have some CSS properties that are only accessible with the -webkit- prefix. One of these properties is -webkit-text-fill-color. It sets the color for the input field even when your browser uses autofill feature. You may have encountered something like this:

This is your browser telling you that this information was autofilled by it.

-webkit-text-fill-color has a higher hierarchy in the Cascading than our regular color, even if you use important. So if your input has a color different than black and you need to overwrite the browser's default, you may want to use -webkit-text-fill-color.

Example

input {
 color: #000;
 -webkit-text-fill-color: #000;
}
Enter fullscreen mode Exit fullscreen mode

Resources

Learn more at the MDN Documentation.

💖 💪 🙅 🚩
paulinhapenedo
Paula Penedo (she/her)

Posted on July 30, 2020

Join Our Newsletter. No Spam, Only the good stuff.

Sign up to receive the latest update from our blog.

Related

Today I learned about "place-items"
todayilearned Today I learned about "place-items"

October 5, 2022

TIL – CSS inset property shorthand
todayilearned TIL – CSS inset property shorthand

February 16, 2022

TIL CSS conic gradient
todayilearned TIL CSS conic gradient

January 23, 2022

A CSS container queries example
css A CSS container queries example

January 11, 2022