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

Question

我使用的是最新版本的 Chrome (74.0.3729.169) 并注意到一些轻微的问题 frustrating/interesting。

在下面的示例中，开始输入您以前使用过的电子邮件地址。 Chrome 的建议出现后，将鼠标悬停在其中一项上。请注意输入的缩小程度。

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

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

如果这没有重现该行为，我深表歉意，但我现在已经能够在多台计算机上使用此代码段重现它，所以我相当有信心这应该有效。

此外（在这里让我的脚趾稍微接触一下 Meta）在 Whosebug 自己的登录屏幕上有一个相当戏剧性的例子，结果整个表单都缩小了。

比较下面两张图片的宽度。或者，在第二张图片中，将 "suggestion" 的宽度与其对应的输入进行比较。

通过检查输入本身，我没有看到任何可以解释此行为的新样式。它似乎也与 padding 无关，因为没有 padding 的输入仍然表现出这种行为。

我的问题有两个：为什么悬停建议会导致输入缩小，并且是否有 method/workaround 来防止这，除了固定宽度或完全禁用建议？

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

或者可能是某处的 Chromium 漏洞票据（我已经搜索过但没有运气 - 谷歌搜索与 Chrome 相关的任何内容 autofill/autocomplete 都是一堆无关的关于安全的文章）？

Answer 1

您遇到的问题与 :-webkit-autofill 伪 class 相关，它通过自动完成将一些默认样式应用于输入。

The :-webkit-autofill CSS pseudo-class matches when an element has its value autofilled by the browser.

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

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

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

以上link您还可以阅读：

Note: The user agent style sheets of many browsers use !important in their :-webkit-autofill style declarations, making them non-overrideable by webpages without resorting to 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">

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

Hovering a Chrome field-suggestion shrinks input

html

css

google-chrome

autocomplete