【问题标题】:Font size changing upon page focus or field focus字体大小随页面焦点或字段焦点而变化
【发布时间】:2019-12-28 23:01:43
【问题描述】:

这只是我注意到的 Chrome,而不是 Firefox。大约 2 周前,我在我设计的一个网站以及一个非常大的客户网站上注意到了一些东西。我相信我在别处见过。当我最初加载页面并且在执行任何其他操作(单击、选项卡、shift-tab)之前,用户名和密码是一个大小。

当我单击或选择标签或以其他方式关注页面时,用户名和密码字段的字体大小都会变大(但字段大小本身不会改变)。

我寻找某种类型的 ::focus::active 伪类,但没有。并且这两个字段都会在页面单击或选项卡上调整字体大小。有谁知道这是为什么,它是否可以以任何方式纠正(在 Chrome 中)?

【问题讨论】:

  • 如果不实际查看代码,很难弄清楚。由于我们实际上无法登录该站点,因此我们可以查看面向公众的站点是什么?
  • 它是 chrome 的一部分,发生在任何具有自动填充字段的表单上。看起来影子根元素得到了一个pseudo="-internal-input-suggested",它的样式带有小文本,并且在焦点上它变为具有正常样式的pseudo="-webkit-input-placeholder"。不确定如何强制-internal-input-suggested 的样式。只是想为可能知道如何强制样式的任何人添加更多信息。
  • 请将您正在使用的 HTML 和 CSS 添加到问题中。
  • 运气好吗?我遇到了同样的问题。仅适用于自动填充的字段。
  • 在这一点上,我想我正在打一场艰苦的战斗来改变这一点。上面 2+ 点赞的评论可能提供了一个起点,但根据进程的顺序,可能难以覆盖甚至捕获/调试。

标签: html css focus


【解决方案1】:

以下方法可以解决问题:

input:-webkit-autofill::first-line {
  font-family: 'Helvetica Neue', 'Arial', Arial, sans-serif !important;
  font-size: 16px !important;
}

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 2023-02-04
    • 2016-03-17
    • 1970-01-01
    • 2010-11-09
    • 2016-11-17
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多