Chrome 自动填充上的预填充值在选择之前是不同的大小

Question

在我的应用程序中，我有多个表单要求用户提供基本信息。（姓名、电子邮件、地址等）。

在 chrome 上，我们有漂亮的自动填充功能。因此，在查看这些表单之一并选择自动填充选项时，所有值都会填充到我的特定信息中，这很灵活。

但是我遇到了一个问题。当我将鼠标悬停在 chrome 自动填充选项上时，我的表单值已预先填充（这不会打扰我，并且是首选）。但问题是这些预填充值的字体大小非常小。一旦我选择了 chrome 自动填充选项，就会选择这些值，它会从小字体大小（大约 8 像素）跳到我设置的大小（20 像素）。

我一直在研究webkit-autofill工具.....但我觉得我已经设法以表单值解决所有问题，除了实际的预填充值。

这是一个前图像和后图像，以帮助澄清我在这里挣扎的问题。

我的代码是

<form>
  <div class="form-group">
    <label for="exampleInputFirst">First Name</label>
    <input type="text" class="form-control input-lg" id="exampleInputFirst">
  </div>
  <div class="form-group">
    <label 
....

我的 css 代码是

text:-webkit-autofill,
#exampleInputFirst:-webkit-autofill:hover
 {
  border: 1px solid red;
  font-size: 20px;
}

我预计font-size: 20px悬停会解决这个问题，但它只有在选择值后才会生效。是否可以以任何方式格式化预先填充的值？