如何在2020年为自动完成和自动填充的输入重置内置样式？ Chrome的食谱

Question

2020年Chrome的使用技巧：

1）防止字体变小（浏览器：11px，虚拟字体家族）

2）从Chrome重置背景色（蓝色，黄色等）

3）自动填充上的“浮动标签输入”模式发生翻转崩溃，然后仅加载页面（标签最初显示为占位符，当用户开始键入时，它会转换为该字段顶部的小标签）。

Answer 1

1）防止字体变小（浏览器：11px，虚拟字体家族：] >>

input:-webkit-autofill::first-line {
  font: 400 15px/18px 'SourceSansPro', sans-serif;
}
2。在Chrome中重置背景色（蓝色，黄色等）：

input:-webkit-autofill {
   transition: background-color 5000s ease-in-out 0s;
}
3）自动填充上的“浮动标签输入”模式发生翻转崩溃，然后仅加载页面（值是空的，没有任何更改事件可捕获此内容）

不幸的是，我们可以侦听动画的开始，并且可以使用-webkit-autofill伪类来响应自动填充而开始动画。

input:-webkit-autofill {
   animation: onAutoFillStart 20s ease-in-out infinite;
}
@keyframes onAutoFillStart {
  from  {color: #000}
  to {color: #090909}
}
检查Chrome自动填充的输入内容：

function inputAutoFillCheck() {
  function onAnimationStart({ target, animationName }) {
    if (animationName !== "onAutoFillStart") return;
    target.parentElement.classList.add("has-txt");
  }
  document.querySelectorAll(".form__input-field").forEach(field => {
    field.addEventListener("animationstart", onAnimationStart, false);
  });
}
inputAutoFillCheck();

PS

它不适用于自动填充，因此页面仅被加载：

👎autocomplete =“ new-password”

👎代替autocomplete =“ off”，使用autocomplete =“ false”;）

👎form autocomplete =“ off”并输入autocomplete =“ off”

👎$（'[autocomplete = off]'）。val（''）;

👎输入：-internal-autofill-previewed {字体大小：22px！important}

👎输入：-webkit-autofill {font-size：22px！important}