输入自动完成，使内容跳转 [英] Autocomplete on input making content jump

问题描述

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

I have an input and in Chrome when the autocomplete menu pops up and you hover over one of the selections the content below the input jumps. Its like the autocomplete selection is adding vertical padding for some reason. How can I stop this it's annoying. Here is an example:

小提琴演示

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

You will probably have to go the fiddle because in the snippet the autocomplete is disabled for some reason. But if you click on the input and hover over an autocomplete entry you can see the green box move. Why is this happening and how do you disable this behavior.

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

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

推荐答案

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

It's related to the default styles that webkit browsers apply to autofill. It seems there is a defined border different from the default one. You can simply try to override some styles in order to avoid the issue.

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

Changing only the border fixed this (at least for me)

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自动完成功能的输入背景色吗?

这篇关于输入自动完成，使内容跳转的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！