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

Question

2020 年 Chrome 的食谱：

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

2) 从 Chrome

重新设置很棒的背景颜色（蓝色、黄色等）

3) 在自动填充时推翻 "floating label input" 模式的崩溃然后页面刚刚加载（标签最初显示为占位符，当用户开始输入时它会转换为顶部的小标签场）。

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) 在自动填充时推翻 "floating label input" 模式的崩溃，然后页面刚刚加载（值是空的，没有捕获此变化的事件）

不幸的是，我们可以监听动画的开始，我们可以使用 -webkit-autofill pseudo-class:

开始动画以响应自动填充

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

自动填充效果不佳，然后页面才加载：

自动完成="new-password"

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

表单自动完成="off" 并输入自动完成="off"

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

input:-internal-autofill-previewed { font-size: 22px !important }

input:-webkit-autofill {font-size: 22px !important}

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

How to reset built-in styles for autocompleted and autofilled inputs in 2020? Recipes for Chrome

css

google-chrome

autocomplete

autofill