相关疑难解决方法(0)

我有一个使用用户名和密码输入的登录表单。在Windows上的Chrome（其他浏览器或Mac上不会发生）中，当将鼠标悬停在Chrome密码管理器中保存的用户名上时，字体会更改。然后，更改字体会更改输入的宽度，从而使我的对齐方式毫无用处。

显然，我可以为输入设置固定宽度以保存对齐方式，但这并不能真正解决问题，只需在其上放置一个创可贴即可。我真正想要的是首先防止字体更改。

我尝试将输入作为目标输入，:-webkit-autofill然后将!important输入的所有CSS都放到上面，以查看是否有东西粘住但没有骰子。

Codepen 在这里。您需要使用Windows上的Chrome浏览器，并使用Google的密码管理器。

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;
    }
  }
}

关于防止这种字体更改的任何线索将不胜感激！

在MacOS上的Google Chrome浏览器（版本75.0.3770.142）中，当我将鼠标悬停在自动填充建议上时，输入中的字体大小变得非常小（字体系列也会更改），但是在选择建议后，它又恢复了正常大小。

是什么导致这种行为？