html - 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悬停时会解决这个问题，但它只有在选择值后才会生效。预填充的值是否可以以任何方式格式化？

标签： htmlcssgoogle-chromewebkitautofill