将鼠标悬停在Chrome字段建议上可缩小输入

Question

我使用的是最新版本的Chrome（74.0.3729.169），发现有些令人沮丧/有趣的东西。

在下面的示例中，开始输入您之前使用的电子邮件地址。Chrome的建议显示后，将鼠标悬停在其中一项上。注意输入的减少幅度。

input { padding: 5px; border: 1px solid #ccc; }

<input id="email" name="email" type="text" placeholder="Email">

对于无法重新创建行为，我深表歉意，但是现在我已经能够在多台计算机上使用此代码段重新创建该行为，因此，我非常有信心这样做。

另外（在这里将我的脚趾稍微浸入Meta中）在StackOverflow自己的登录屏幕上有一个相当生动的示例，其结果是整个表单缩小了。

比较下面两个图像的宽度。或者，在第二个图像中，将“建议”的宽度与其对应的输入进行比较。

通过检查输入本身，我看不到任何可以解释这种行为的新样式。它似乎与padding两者都不相关，因为没有充分padding展示这种行为的输入。

我的问题有两个方面：为什么将建议悬停在输入上会导致输入收缩，并且除了固定宽度或完全禁用建议之外，是否有其他方法/解决方法来防止这种情况？

（我认为这两种解决方法都是有条件的。在某些情况下，您可能不想出于样式目的而指定输入宽度，并且禁用建议似乎过分且对UX有害）

还是某个地方的Chromium错误票证（我没有运气进行过搜索-搜索与Chrome浏览器的自动填充/自动填充相关的内容都是关于安全性的无关文章）？

Answer 1

您所面临的与:-webkit-autofill伪类有关，该类通过自动完成对输入应用了一些默认样式。

:-webkit-autofill CSS 伪类在元素具有由浏览器自动填充的值时匹配。

不幸的是，我无法找到这些样式的确切定义位置，但这里有一个示例来确认这一点。如果您尝试使用相同的宽度值，您将避免收缩效果：

:-webkit-autofill {
  width: 173px;
}

<input id="email" name="email" type="text" placeholder="Email">

在上面的链接中，您还可以阅读：

注意：许多浏览器的用户代理样式表!important在它们的:-webkit-autofill样式声明中使用，使它们不能被网页覆盖而无需求助于 JavaScript hacks。

因此，即使!important您将无法覆盖某些样式：

:-webkit-autofill {
  width: 173px;
  background:red!important; /* will not work*/
  border:2px solid blue;
  margin-left:150px;
}

<input id="email" name="email" type="text" placeholder="Email">

对于宽度的问题，我想唯一的办法就是因为我试图定义一个明确的宽度auto，initial，unset，等他们不工作。

如果你不能设置宽度而你想要默认的，你可以考虑用JS来做：

document.querySelector('#email').style.width=document.querySelector('#email').offsetWidth+"px";

<input id="email" name="email" type="text" placeholder="Email">