DEV Community

loading...

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

paulinhapenedo profile image Paula Penedo (she/her) ・1 min read

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.

Discussion

pic
Editor guide