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

Question

在MacOS上的Google Chrome浏览器（版本75.0.3770.142）中，当我将鼠标悬停在自动填充建议上时，输入中的字体大小变得非常小（字体家族也会更改），但是在选择建议后，它又恢复了正常大小。

什么可能导致这种行为？

Answer 1

有一个解决方案：

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

Answer 2

前段时间我遇到了同样的问题。我建议您只需在输入标签中使用autocomplete=off退出样式。我在CSS-Tricks中发现了一篇有关“ Autocomplete”属性的帖子。并非所有浏览器都支持此属性，并且仅具有某些要样式化的功能。如果您要检查链接，则将链接留在这里：

https://css-tricks.com/snippets/css/change-autocomplete-styles-webkit-browsers/

Answer 3

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

Answer 4

这是 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>