37

I have a login form with username and password inputs. In Chrome on Windows (doesn't happen in other browsers or on a Mac), when hovering over a saved username from the Chrome password manager, the font changes. The font change then changes the width of the input, throwing my alignment out of whack.

Obviously I can set a fixed width to my input to save my alignment but that doesn't really solve the problem, just puts a band-aid on it. What I really want is to prevent the font change in the first place.

I've tried targeting the input with :-webkit-autofill and putting !important all over my input's css just to see if anything would stick but no dice.

Codepen here. You'll need to be in Chrome on Windows and use Google's password manager.

HTML:

<form>
    <label>
        <input type="text" name="username" placeholder="Username" required />
    </label>
    <label>
        <input type="password" name="password" placeholder="Password" required />
    </label>
  <button type="submit">Login</button>
</form>

SCSS:

// setting font for more exaggerated difference
* {
  font-family: Times, "Times New Roman", serif;
}

// why doesn't this or anything else work?
input {
  &:-webkit-auto-fill {
    &,
    &:hover,
    &:focus {
    font-family: Times, "Times New Roman", serif !important;
    }
  }
}

Any clues on preventing this font change would be appreciated!

shainanana
  • 413
  • 4
  • 9
  • 1
    I have the same issue. It looks to me like it's a bug in Chrome. I decided to put all my input fields that kept changing the width in flexbox containers, to keep the width stable as a temporary workaround. – Rias Jun 24 '19 at 12:34
  • Contra what you say here, this is not Windows-specific. The same bug will exist in all desktop versions of Chrome. If you didn't observe it on a Mac, I suspect it's because your install of Chrome on that Mac wasn't up to date at the time that you tested. (Note that the bug was introduced into a release version of Chrome less than a month before you asked this question.) – Mark Amery Jan 03 '20 at 15:16
  • The same question in https://stackoverflow.com/questions/57551530/how-can-i-remove-the-styles-from-the-pseudo-element-internal-input-suggested – Binyamin Sep 29 '20 at 20:14

5 Answers5

21

try this!

      &:-webkit-autofill::first-line,
      &:-webkit-autofill,
      &:-webkit-autofill:hover,
      &:-webkit-autofill:focus,
      &:-webkit-autofill:active {
        font-family: Times, "Times New Roman", serif !important;
      }

you might only need this though

     &:-webkit-autofill::first-line

the others are just incase

cup_of
  • 5,033
  • 5
  • 27
  • 67
16

This seems to be a recent change in Chrome: Issue 953689: Previously entered form values overrides styling when moused over. As far as I’ve seen this happens both on macOS and Windows, anywhere autofill is presented to the end user. Apparently this has intentionally been done to fix a security issue with the previous implementation – Issue 916838: Security: Two autocomplete flaws together allow sites to invisibly read credit card numbers after a single keypress

There doesn’t seem to be a way to override those new styles at the moment – if the change in styles is really too obnoxious, you can either disable autofill (Disabling Chrome Autofill) or set your field’s font styles (font-family, font-weight, font-style, font-size to match that of Chrome’s autofill suggestions – as suggested here: https://stackoverflow.com/a/56997845/1798491)

Thibaud Colas
  • 1,036
  • 1
  • 13
  • 24
  • 7
    Heh. Judging by the views and votes here, a lot of people are annoyed by the damage I caused with that exploit report. Sorry about that. In my defence, I [*did* warn Google SecurityTeam](https://bugs.chromium.org/p/chromium/issues/detail?id=916838#c16) that this change had UX downsides and suggest another fix, but they went ahead and did it anyway. On the bright side, there's [a commit](https://chromium.googlesource.com/chromium/src.git/+/39f06061af8da287363cba093071ec348ef642c2) now public implementing the alternative fix, so maybe we will see the forcing of a default font reverted soon too. – Mark Amery Jan 03 '20 at 14:24
  • 2
    @MarkAmery any idea when this fix will be released? – Lenny D Mar 04 '20 at 10:33
1

How to change Chrome autocomplete styles on input:

input {
...
font-family: $body-font;
font-size: 1rem;
font-weight: bold;
color: #000;
background-color: #fff;
  
// Background color
&:-webkit-autofill {
  -webkit-box-shadow: 0 0 0 1000px #fff inset;
}
  
// Font styles
&:-webkit-autofill::first-line {
  font-family: $body-font;
  font-size: 1rem;
  font-weight: bold;
  // color: green;
}

}

StefanBob
  • 3,987
  • 2
  • 21
  • 34
-1

I don't run on windows but have you tried targeting the label and form as well? Re: css specificity. Then try web-kit auto-fills on all

CCodes
  • 33
  • 8
-1

As of now it seems that there's no way to change this in Chrome. I'd definitely call it a bug.

However, a decent workaround is to set the font-family for all autofill-able inputs or inputs within forms that have autofill abilities to this:

font-family: -apple-system, system-ui, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Ubuntu, Arial, sans-serif;

This is a great cross-browser, cross-platform solution because it just takes whatever your system font is, which is exactly what Chrome seems to be doing for it's autofill font.

It also ensures that your forms are going to have readable fonts on whatever OS your user is using.

d35348w
  • 136
  • 1
  • 9