Trouble with <input> styling and autofill

All we need is an easy explanation of the problem, so here it is.

I am building a login modal and would like to use input tags to enable browsers to autocomplete username and password however I am struggling to fully reset the User Agent Stylesheet styling for input tags. Whenever autocomplete does its thing the old styling comes back.

Here’s my (simplified) react login form:

<form id="login-popup-container">
    <div className="login-field-container">
        <div className="login-value-title user">email</div>
        <input className="answer login-info" type="text" />
    </div>
    <div className="login-field-container">
        <div className="login-value-title password">password</div>
        <input className="answer login-info" type="password" />
    </div>
</form>

I have added this in my index.css:

input, input:focus, input:active, input:hover, input:-webkit-autofill, input:autofill, input:indeterminate, input:enabled, input:valid {
    outline: none !important;
    border:none !important;
    background-image:none !important;
    background-color:transparent !important;
    -webkit-box-shadow: none !important;
    -moz-box-shadow: none !important;
    box-shadow: none !important;
}

It works in a chrome incognito browser well enough

But in a regular chrome tab when autofill is performed by chrome this action brings the User Agent Stylesheet styling back to the input elements like this. As you can see above I have tried adding all the pseudo classes I could think of to the input tag reset styling but with no success.

Has anybody experienced this issue before / know why this is happening?

How to solve :

I know you bored from this bug, So we are here to help you! Take a deep breath and look at the explanation of your problem. We have many solutions to this problem, But we recommend you to use the first method because it is tested & true method that will 100% work for you.

Method 1

You can’t override UA styles with !important

The user agent style sheets of many browsers use !important in their :-webkit-autofill style declarations, making them non-overrideable by webpages without resorting to JavaScript hacks.
https://developer.mozilla.org/en-US/docs/Web/CSS/:autofill

Also, more efficiently reset every single style on your inputs with the CSS all property!

input {
  all: unset;
}

You can use these global values:

  • initial – set all properties to property default defined by CSS
  • unset – if normally inherited: inherit, if not: initial
  • revert – set all properties to default for element defined by UA

Method 2

For anybody experiencing this issue… the answer to my question turned out to be a combination of Zach Jensz’s answer and adding a transition delay to <input> elements. It’s definitely more of a hack than an answer, but for me it works.

My css reset looks like this:

input {
  all: unset;
}

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
  transition: all 5000s ease-in-out 0s;
}

and my styling for inputs looks like this:

.classname-used-for-my-inputs {
    background: transparent;
    background-color: transparent;
    color: white;
    border: none;
}

The reason the delay hack is necessary is because even after unsetting all the styles, upon an autocomplete of the email/password event the User Agent styles kept coming back (I could not figure out how to prevent this). But at least now the delay time is so long that for all practical purposes no one will ever notice them and so for my purposes it works.

If somebody explains why / proposes a non hacky solution I will update this.

Note: Use and implement method 1 because this method fully tested our system.
Thank you 🙂

All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0

Leave a Reply