悬停在自动填充建议上时输入文本非常小

Question

在 MacOS（版本 75.0.3770.142）上的 Google Chrome 中，当我将鼠标悬停在自动填充建议上时，输入中的字体大小变得非常小（字体系列也发生了变化），但在选择了建议后，它又恢复了正常大小。

什么可能导致这种行为？

Answer 1

有一个解决办法：

input:-webkit-autofill::first-line {font-size: 16px}

Answer 2

这是 2021 年对我有用的工作解决方案，Chrome 不会在自动完成时更改字体大小建议悬停：

input#email {
  font-size: 2rem;
  color: blue;
}

input:-webkit-autofill::first-line {
      color: red;
      font-size: 2rem;
}

<input id="email"></input>

我还注意到由于某种原因display: flex 与该代码冲突，请查看：

input#email {
  font-size: 2rem;
  color: blue;
  display: flex;
}

input:-webkit-autofill::first-line {
      color: red;
      font-size: 2rem; 
}

<input id="email"></input>

Answer 3

输入：-webkit-autofill，输入：-webkit-autofill：悬停，输入：-webkit-autofill：focus { // 把你的旧样式放在这里 }