0

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.

Milos
  • 981
  • 3
  • 16
  • 41

1 Answers1

1
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?

TorNato
  • 305
  • 2
  • 12
  • It is not about coloring. It's that on autocomplete, span is not moved out of the way, ie on top of the input box. – Milos May 14 '22 at 14:58