输入框自动完成导致内容跳动

Question

我有一个输入框，在Chrome浏览器中当自动填充菜单弹出并悬停在其中一个选项上时，输入框下面的内容会跳动。就像自动填充选项出现了垂直内边距一样。如何停止此行为？非常烦人。以下是示例：

演示

由于某些原因，片段中禁用了自动填充，所以您可能需要转到演示。但是，如果您单击输入框并悬停在自动填充条目上，可以看到绿色框移动。为什么会发生这种情况，如何禁用此行为。

div{
  width:300px;
  height:200px;
  background: green;
}

<input type="text" name="q" />
<div></div>

- user3331344

---

哇。真的吗。它不应该跳动。它甚至改变了大小。也许要提交一个bug报告？ - Roko C. Buljan

Answer 1

这与Webkit浏览器应用于自动填充的默认样式有关。似乎有一个定义的边框与默认边框不同。您可以尝试覆盖一些样式以避免此问题。

仅更改边框即可解决此问题（至少对我而言）

div{
  width:300px;
  height:200px;
  background: green;
}

input:-webkit-autofill,
input:-webkit-autofill:hover, 
input:-webkit-autofill:focus {
  border:1px inset;
}

<input type="text" name="q" />
<div></div>

相关文章: 如何移除Chrome自动填充的输入框背景颜色？

- Temani Afif

---

这是我在发布这个问题之前的第一个猜测。它确实有反弹1像素。我尝试将其设置为0像素，但然后它会向另一个方向反弹。因此，还有其他因素在起作用，我只是不确定是什么。 - user3331344

@user3331344 也可以尝试使用填充(padding)，或者确保自动填充和默认按钮使用相同的CSS，以确保不会出现任何弹跳。 - Temani Afif

Answer 2

这是浏览器的行为。 您可以使用:hover覆盖它，确保其宽度始终为99％，然后将其放入容器中。

请参见下面的示例。

div{
  width:300px;
  height:200px;
  background: green;
}

input,input:hover{
width:99%;

}

<div>
<input type="text" name="q" />
</div>
<div></div>

- Alen.Toma

---

哈哈，这是填充问题 :) 所以它不会超出容器的宽度。 - Alen.Toma

@Alen.Toma 这个问题与输入框的宽度或是否在容器中无关，它会像添加垂直填充一样上下跳动。我猜测这不是 Firefox 的问题，而是 Webkit 的问题。 - user3331344

我的朋友，当我说“这是Web浏览器的行为”时，这就是我的意思。我给了你一个覆盖浏览器行为的技巧，这样你就可以拥有不依赖于Web浏览器的相同样式，无论是Firefox还是其他浏览器。 - Alen.Toma

@Alen.Toma，你的回答与问题无关。这种行为与宽度或容器无关，也与在输入上悬停无关。它与自动完成有关。请仔细阅读问题。你发布的hack对此没有帮助。 - user3331344