自动填充用户名/密码时,如何防止Chrome更改字体?

我有一个使用用户名和密码输入的登录表单。在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;

}

}

}

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

回答:

尝试这个!

      &:-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更改字体? 的全部内容, 来源链接: utcz.com/qa/417851.html

回到顶部