CSS 中的 Chrome 自动完成和过渡动画

Question

我有一个 Google Chrome 正在破坏的半复杂的用户注册表单。 根据设计，我已经移动/动画占位符，它在用户焦点上从输入移出到其上方 20 像素，并在该字段中有东西时保持在那里。 来 Chrome 自动完成，一切都被电子邮件字段搞砸了。

所以，我假设焦点事件没有在自动完成时被调用，因此一切都会中断。

JS小提琴的例子，虽然我没有在那里自动完成： 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>

我怎样才能使自动完成不规则样式？

编辑：不是颜色改变了，而是跨度变色效应在自动完成时不起作用。

Answer 1

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

这应该可以防止 Chrome 对输入进行任何样式设置

有关更多信息，请参阅删除 Chrome 自动完成的输入背景颜色？