如何防止 Chrome 自动填充期间字体发生变化？-css教程-PHP中文网

如何防止 Chrome 自动填充期间字体发生变化？

Mary-Kate Olsen

发布： 2024-10-26 06:51:02

原创

509 人浏览过

How to Prevent Font Changes During Chrome Autofill?

在 Chrome 中自动填充期间防止字体更改

在 Windows 上的 Chrome 中使用内置密码管理器自动填充用户名和密码字段时，字体会发生变化，这可能会破坏对齐。本文旨在提供防止字体更改的修复程序。

尽管尝试使用 -webkit-autofill 和 !important 标签修改输入的 CSS，但字体更改仍然存在。更有效的解决方案是针对经历更改的输入的特定部分。

通过利用 :first-line 伪元素，您可以隔离和修改自动填充输入中的第一行文本。以下CSS代码将确保字体保持一致：

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

登录后复制

这专门针对自动填充输入的第一行，覆盖默认字体更改。在某些情况下，其他元素也可能受到字体更改的影响。为了解决这个问题，您可以扩展 CSS 代码以定位其他组件：

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

登录后复制

通过应用这些 CSS 修改，您可以防止在自动填充期间 Chrome 中的字体发生变化，从而保持登录表单所需的对齐方式。

以上是如何防止 Chrome 自动填充期间字体发生变化？的详细内容。更多信息请关注PHP中文网其他相关文章！