悬停 Chrome 字段建议会缩小输入

Posted 2023-03-06

【中文标题】悬停 Chrome 字段建议会缩小输入

【英文标题】：Hovering a Chrome field-suggestion shrinks input

【发布时间】：2019-10-16 04:07:28

【问题描述】：

我正在使用最新版本的 Chrome (74.0.3729.169) 并注意到一些令人沮丧/有趣的事情。

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

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

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

如果这没有重新创建该行为，我深表歉意，但是我现在已经能够在多台计算机上使用这个 sn-p 重新创建它，所以我相当有信心这应该可以工作。

另外（在这里稍微深入一下 Meta）在 *** 自己的登录屏幕上有一个相当引人注目的示例，其中整个表单因此缩小。

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

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

我的问题有两个：为什么悬停建议会导致输入缩小，以及，是否有防止这种情况的方法/解决方法，除了 em> 固定宽度还是完全禁用建议？

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

或者可能是某个地方的 Chromium 错误票（我没有运气搜索过 - 谷歌搜索与 Chrome 的自动填充/自动完成相关的任何内容都是一堆关于安全性的不相关文章）？

【问题讨论】：

重复或密切相关：***.com/a/56617262/8620333

@tylerRoper 见上面的问题 ^

@TemaniAfif 非常相似的问题，很好的答案。不过，它似乎专门针对 border 而不是宽度。在您的回答中，我仍然看到输入宽度发生了巨大变化。出于这个原因，我不认为它完全是重复的（另外，它没有可接受的答案，所以我不确定它是否应该被标记为一个）。最好将两者“合并”，因为它们肯定解决了相同的问题，但在当前状态下，它们询问的是同一错误的两种不同症状，这意味着不能保证答案重叠。

@TylerRoper 因为OP只受到边框和高度变化的困扰，而不是宽度但问题相同，您需要重置浏览器应用的默认样式并与@987654330相关@（作为旁注，我们不能用赏金结束一个问题）.. 可能也会在这里添加答案

@TemaniAfif 正确，我同意这个问题是同一个问题。我只是说另一个答案（特定于border）并没有解释如何保持宽度不变。虽然它可能像width: initial 一样简单，但缺少该花絮让我认为其他问题/答案不足以解决 this 问题。我鼓励您也亲自为此添加答案。

【参考方案1】：

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

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

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

:-webkit-autofill 
  width: 173px;

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

在上面的链接中你也可以阅读：

注意：许多浏览器的用户代理样式表在其:-webkit-autofill 样式声明中使用!important，这使得它们无法被网页覆盖，而无需借助 javascript hack。

因此，即使使用!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">