CODEWITHSUNDEEP
htmlcssautocomplete
errorous
errorous

Reputation: 1071

Chrome autocomplete and transition animation in CSS

I've a semi-complicated user registration form that Google Chrome is ruining. As per design, I've moving/animated placeholder which moves out of input to 20px above it on user focus, and stays there if something is in the field. Come Chrome autocomplete, everything is messed up with email field.

So, I assume focus event is not being invoked on autocomplete, hence everything breaks.

Example on JS fiddle, though I'm not getting autocomplete there: https://jsfiddle.net/dxgou68p/1/

label {
  margin:20px 0;
  position:relative;
  display:inline-block;
}
  
span {
  padding:10px;
  pointer-events: none;
  position:absolute;
  left:0;
  top:0;
  transition: 0.2s;
  transition-timing-function: ease;
  transition-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1);
  opacity:0.5;
}

input {
  padding:10px;
}

input:focus + span, input:not(:placeholder-shown) + span {
  opacity:1;
  transform: scale(0.75) translateY(-100%) translateX(-30px);
}
<form>
    <div class="form-field">
    <label>
      <input type email placeholder=" ">
      <span>Placeholder Text</span>
    </label>
    </div>
</form>

How can I make it so that autocomplete doesn't rule styling?

EDIT: It is not that color is changed, bur rather span tarnsition efect doesn't do it's thing on autocomplete.

Upvotes: 0

Views: 466

Answers (1)

TorNato
TorNato

Reputation: 305

input:-webkit-autofill{
    -webkit-text-fill-color: black !important;
    -webkit-box-shadow: 0 0 0 30px white inset !important;
}

This should prevent Chrome doing any styling on the inputs

For more info see Removing input background colour for Chrome autocomplete?

Upvotes: 1

Related Questions