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

【问题标题】：How to reset built-in styles for autocompleted and autofilled inputs in 2020? Recipes for Chrome如何在 2020 年重置自动完成和自动填充输入的内置样式？铬食谱
【发布时间】：2020-05-30 17:10:39
【问题描述】：

2020 年 Chrome 食谱：

1) 防止小字体（浏览器：11px, dummy font-family）

2) 从 Chrome 中重置令人敬畏的背景颜色（蓝色、黄色等）

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

【问题讨论】：

标签： css google-chrome autocomplete autofill

【解决方案1】：

1) 防止小字体（浏览器：11px，dummy font-family）：

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();

附言

它不适用于自动填充，然后页面刚刚加载：

? autocomplete="new-password"

? 而不是 autocomplete="off" 使用 autocomplete="false" ;)

? 形成 autocomplete="off" 并输入 autocomplete="off"

? $('[autocomplete=off]').val('');

? 输入：-internal-autofill-previewed { font-size: 22px !important }

? 输入：-webkit-autofill {font-size: 22px !important }

【讨论】：