Deepak Pahwa Deepak Pahwa - 2 months ago 9
HTML Question

How can we overwrite user agent stylesheet?

I have a form where i saved my login credentials. Now chrome is showing its own background color to the input fields.

I did research for this but didn't found anything.

Is there any way to overwrite user agent stylesheet which is coming from chrome only with css?

Answer

Yes you can change the styles like so:

/* Change Autocomplete styles in Chrome*/
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: green;
  -webkit-box-shadow: 0 0 0px 1000px #000 inset;
  transition: background-color 5000s ease-in-out 0s;
}

Follow the article for more info: https://css-tricks.com/snippets/css/change-autocomplete-styles-webkit-browsers/