Change the text color of an input field with an autocompleted value
Paula Penedo (she/her)
Posted on July 30, 2020
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;
}
Resources
Learn more at the MDN Documentation.
💖 💪 🙅 🚩
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.