自动填充用户名/密码时，如何防止Chrome更改字体? [英] How to prevent Chrome from changing font when autofilling username/password?

问题描述

我有一个包含用户名和密码输入的登录表单.在Windows上的Chrome(在其他浏览器或Mac上不会发生)中，当将鼠标悬停在Chrome密码管理器中保存的用户名上时，字体会更改.然后，更改字体会更改输入的宽度，使我的对齐方式不合常规.

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.

我尝试使用:-webkit-autofill定位输入，并将!important放在输入的CSS上，只是看是否有东西会粘住但没有骰子.

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 此处.您需要使用Windows上的Chrome浏览器，并使用Google的密码管理器.

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!

推荐答案

尝试一下！

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

尽管您可能只需要这个

     &:-webkit-autofill::first-line

其他只是为了防伪

这篇关于自动填充用户名/密码时，如何防止Chrome更改字体?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！