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

Question

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

小提琴演示

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

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

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

Answer 1

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

请参阅下面我的示例。

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

input,input:hover{
width:99%;

}

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