How to override browser form-filling and input highlighting with HTML and CSS?

Spread the love

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.

Leave a Reply

Your email address will not be published.