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!