Trouble with <input> styling and autofill

user_14111763 0
Viewed 120

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?

reactjs input css html javascript
2 Answers

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
user_141905430

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.

user_141117630
Related