5

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>
user3331344
  • 728
  • 8
  • 23

2 Answers2

1

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?

Temani Afif
  • 245,468
  • 26
  • 309
  • 415
  • This was my first guess before I posted this question. It does but it is still bouncing the 1px. I tried setting it to 0px but then it bounces the other direction. So there is something else at play I'm just not sure what it is. – user3331344 Jun 16 '19 at 21:37
  • @user3331344 try also padding, or to make sure you will not have any boucing put the same CSS for the auto-fill and the default button – Temani Afif Jun 16 '19 at 21:39
-1

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>
Alen.Toma
  • 4,684
  • 2
  • 14
  • 31
  • Hahah its the padding issue :) so it dose not expand more then the container width. – Alen.Toma Jun 16 '19 at 01:33
  • @Alen.Toma The issue has nothing to do with the width of the input or whether it is in a container it jumps up and down like it is adding vertical padding. It doesn't happen in Firefox im assuming its a webkit thing. – user3331344 Jun 16 '19 at 01:52
  • Well my friend its what i ment when i said its `the behavior of the web browser`. i gave you a hack that override the browser behavior so you could have the same style that do not depend on the webbrowser. be it firefox or whatever – Alen.Toma Jun 16 '19 at 02:03
  • @Alen.Toma Your answer is irrelevant to the question. The behavior has nothing to do with the width or the container and nothing to do with hovering on the input. It has to do with the autocomplete. Read the question. The hack you posted will not help for this. – user3331344 Jun 16 '19 at 02:08