输入自动完成，使内容跳转

Question

我有一个输入，在Chrome中，当自动完成菜单弹出时，当您将鼠标悬停在其中一个选项上时，输入下方的内容就会跳转。就像自动完成选择一样，由于某种原因，它会添加垂直填充。我该如何停止这很烦人。这是一个示例：

Fiddle Demo

您可能不得不摆弄小提琴，因为在代码段中，由于某些原因自动完成功能被禁用。但是，如果单击输入并将鼠标悬停在自动完成条目上，您会看到绿色框移动。为什么会发生这种情况，以及如何禁用此行为。

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

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

Answer 1

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

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

MIP

apply_along_axis()

相关：Removing input background colour for Chrome autocomplete?

Answer 2

它是Web浏览器的行为。 您可以使用:hover覆盖它，并确保其宽度始终为99%，然后将其放置在计数器中。

下面是我的例子。

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

input,input:hover{
width:99%;

}

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