自动完成输入使内容跳转答案

【问题标题】：Autocomplete on input making content jump自动完成输入使内容跳转
【发布时间】：2019-10-30 02:30:57
【问题描述】：

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

您可能不得不费尽心思，因为在 sn-p 中，自动完成功能由于某种原因被禁用。但是，如果您单击输入并将鼠标悬停在自动完成条目上，您可以看到绿色框移动。为什么会发生这种情况以及如何禁用此行为。

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

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

【问题讨论】：

哇。真的。它不应该跳。它甚至改变大小。也许提交一个错误？

标签： html css

【解决方案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>

【讨论】：

这是我发布这个问题之前的第一个猜测。确实如此，但它仍在弹跳 1px。我尝试将其设置为 0px，但随后它会向另一个方向反弹。所以还有别的东西在起作用，我只是不确定它是什么。
@user3331344 也尝试填充，或者确保您不会有任何弹跳，为自动填充和默认按钮放置相同的 CSS

【解决方案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 这个问题与输入的宽度无关，或者它是否在容器中它会像添加垂直填充一样上下跳跃。假设它是 webkit 的东西，它不会在 Firefox 中发生。
嗯，我的朋友，当我说它the behavior of the web browser 时，它就是我的意思。我给了你一个覆盖浏览器行为的技巧，这样你就可以拥有不依赖于 webbrowser 的相同样式。不管是火狐还是什么
@Alen.Toma 您的回答与问题无关。该行为与宽度或容器无关，与悬停在输入上无关。它与自动完成有关。阅读问题。您发布的 hack 对此无济于事。