Hovering a Chrome field-suggestion shrinks input

Question

I\'m using the latest version of Chrome (74.0.3729.169) and noticed something slightly frustrating/interesting.

In the example below, begin typing an email address t

Answer 1

What you are facing is related to :-webkit-autofill pseudo class that is applying some default styling to the input with an autocomplete.

The :-webkit-autofill CSS pseudo-class matches when an element has its value autofilled by the browser.

Unnfortunately, I am not able to find where exactly those styles are defined but here is an example to confirm this. If you try to use the same value of width you will avoid the shrink effect:

:-webkit-autofill {
  width: 173px;
}

<input id="email" name="email" type="text" placeholder="Email">

In the above link you can also read:

Note: The user agent style sheets of many browsers use !important in their :-webkit-autofill style declarations, making them non-overrideable by webpages without resorting to JavaScript hacks.

So even with !important you won't be able to override some styles:

:-webkit-autofill {
  width: 173px;
  background:red!important; /* will not work*/
  border:2px solid blue;
  margin-left:150px;
}

<input id="email" name="email" type="text" placeholder="Email">

For the width issue, I guess the only way is to define an explicit width as I have tried auto, initial, unset, etc and they aren't working.

If you cannot set a width and you want the default one, you can consider JS to do this:

document.querySelector('#email').style.width=document.querySelector('#email').offsetWidth+"px";

<input id="email" name="email" type="text" placeholder="Email">