Sometimes, we want to override browser form-filling and input highlighting with HTML and CSS.
In this article, we’ll look at how to override browser form-filling and input highlighting with HTML and CSS.
How to override browser form-filling and input highlighting with HTML and CSS?
To override browser form-filling and input highlighting with HTML and CSS, we can use the -webkit-autofill pseudoselector.
For instance, we write
input:-webkit-autofill {
-webkit-box-shadow: 0 0 0 50px white inset;
-webkit-text-fill-color: #333;
}
input:-webkit-autofill:focus {
-webkit-box-shadow: 0 0 0 50px white inset;
-webkit-text-fill-color: #333;
}
to change the box shadow of the input by setting -webkit-box-shadow.
Conclusion
To override browser form-filling and input highlighting with HTML and CSS, we can use the -webkit-autofill pseudoselector.
