Autocomplete on input making content jump

user_3331344 0
Viewed 1579

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:

Fiddle Demo

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>

css html
2 Answers

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>

Related: Removing input background colour for Chrome autocomplete?

user_86203330

Its the behavior of the web browser. you can override it with :hover and make sure its width are always 99% and then have it within a countainer.

Se my example below.

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

input,input:hover{
width:99%;

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

user_48285240
Related