自动填充用户名/密码时,如何防止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