I am building a login modal and would like to use input tags to enable browsers to autoplete username and password however I am struggling to fully reset the User Agent Stylesheet styling for input tags. Whenever autoplete does its thing the old styling es 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?

I am building a login modal and would like to use input tags to enable browsers to autoplete username and password however I am struggling to fully reset the User Agent Stylesheet styling for input tags. Whenever autoplete does its thing the old styling es 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?

• javascript
• html
• css
• reactjs
• input

3 Answers 3

For anybody experiencing this issue... the answer to my question turned out to be a bination 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 autoplete of the email/password event the User Agent styles kept ing 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.

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/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

Also for styled-ponents, you could only apply it in your global.styles folder

input {
  all: unset;
}