文章/答案/技术大牛

发布

社区首页 >问答首页 >如何防止Chrome在自动填写用户名/密码时更改字体？

问如何防止Chrome在自动填写用户名/密码时更改字体？
EN

Stack Overflow用户

提问于 2019-05-07 23:33:51

回答 6查看 9.4K关注 0票数 46

我有一个用户名和密码输入的登录表单。在Windows上的Chrome中(在其他浏览器或Mac上不会发生)，当鼠标悬停在Chrome密码管理器中保存的用户名上时，字体会发生变化。字体的改变改变了输入的宽度，使我的对齐方式不对准。

显然，我可以设置输入的固定宽度来保存对齐，但这并不能真正解决问题，只是在上面贴了个创可贴。我真正想要的是从一开始就防止字体改变。

我试着用:-webkit-autofill来定位输入，并在输入的css上放满了!important，看看有没有什么东西能坚持下去，但是没有骰子。

Codepen here。你需要在Windows上使用Chrome，并使用谷歌的密码管理器。

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

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

html

css

回答 6

Stack Overflow用户

回答已采纳

发布于 2020-04-02 16:36:11

试试这个！

      &:-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

其他的只是以防万一

票数 31

Stack Overflow用户

发布于 2019-07-22 21:25:02

这似乎是Chrome最近的一个变化：Issue 953689: Previously entered form values overrides styling when moused over。据我所知，这在macOS和Windows上都会发生，任何地方的自动填充都会呈现给最终用户。显然，这样做是为了修复以前实现的一个安全问题-- Issue 916838: Security: Two autocomplete flaws together allow sites to invisibly read credit card numbers after a single keypress

目前似乎还没有覆盖这些新样式的方法-如果样式的更改真的太令人讨厌，你可以禁用自动填充(Disabling Chrome Autofill)或设置字段的字体样式(font-family，font-weight，font-style，font-size，以匹配Chrome的自动填充建议-如这里建议的：https://stackoverflow.com/a/56997845/1798491)

票数 19

Stack Overflow用户

发布于 2021-08-05 19:42:32

这是一个在2021年对我有效的解决方案，防止Chrome在密码/用户名输入字段中更改字体：

input#username {
  font-family: "Rubik";
  font-weight: bold;
  color: blue;
}

input:-webkit-autofill::first-line {
      color: red;
      font-family: "Rubik"; 
      font-weight: bold;
}

<link href="https://fonts.googleapis.com/css?family=Rubik&display=swap" rel="stylesheet">
<input id="username" name="username"></input>

此外，我还注意到，由于某些原因，display: flex与该代码冲突，请看一下：

input#username {
  font-family: "Rubik";
  color: blue;
  font-weight: bold;
  display: flex;
}

input:-webkit-autofill::first-line {
      color: red;
      font-family: "Rubik";
      font-weight: bold;
}

<link href="https://fonts.googleapis.com/css?family=Rubik&display=swap" rel="stylesheet">
<input id="username"></input>

票数 4

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/56026043

复制

相似问题

问如何防止Chrome在自动填写用户名/密码时更改字体？
EN

回答 6

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何防止Chrome在自动填写用户名/密码时更改字体？EN

回答 6

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何防止Chrome在自动填写用户名/密码时更改字体？
EN