Introduction:

In this post, we will see,How to Change Autocomplete Styles in WebKit Browsers.Many browsers (including Chrome and Safari) provide a setting that allows users to automatically fill in details for common form fields.

We can change Autocomplete Styles of WebKit Browsers by changing the property or changing the following css.

Textbox Autofil Property CSS :

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus
input:-webkit-autofill,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover
textarea:-webkit-autofill:focus,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus {
border: 1px solid green;
-webkit-text-fill-color:black;
-webkit-box-shadow: 0 0 0px 1000px transparent inset;
transition: background-color 5000s ease-in-out 0s;
}

We can use the -webkit-autofill pseudo-selector to target those fields and style them as we see fit. The default styling only affects the background color, but most other properties apply here, such as border and font-size. We can even change the color of the text using -webkit-text-fill-color which is included in the above snippet.

Also Learn More Tutorial :