CSS自动完成字体大小[重复]答案

【问题标题】：CSS自动完成字体大小[重复]
【发布时间】：2019-12-03 08:34:30
【问题描述】：

当将鼠标悬停在来自浏览器的自动完成建议上时，我不知道如何增加或如何使用预览文本的默认字体大小。

例如：

这是我输入一些文本后默认字体大小的正常输入元素：

当我将鼠标悬停在建议的自动完成项目之一时，这是预览的字体大小：

如您所见，字体大小比第一张图片要小很多。

我已经在使用一些 CSS-sn-p 来禁用所有特定于浏览器的样式：

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover,
textarea:-webkit-autofill:focus,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus {
  border: inherit;
  -webkit-text-fill-color: inherit;
  -webkit-box-shadow: inherit;
  transition: background-color 5000s ease-in-out 0s;
  font-size: inherit;
}

最后一个属性font-size 什么都不做。

我使用以下 css 作为输入字体大小：

    font-size: 1.125rem !important;

我也尝试将 font-size 分配为 inline-style 来修复它，但它也不起作用：

现场示例：https://codesandbox.io/s/o766kp4z05 使用示例并尝试在电子邮件字段中输入您的电子邮件并查看字体大小。字体大小也有同样的问题。

是否可以固定字体大小？

【问题讨论】：

从内联 css 中删除 25px 字体大小开始...在您执行此操作并对其进行测试后，发布更新（表示它已失败/成功）
+1 我有同样的问题，似乎没有办法阻止字体大小的变化。可能这应该作为一个错误报告给 Chrome...
@Ash 我的错。昨天出于某种未知原因，我误读了另一个问题，并认为这是关于如何完全防止自动填充。删除我的 cmets。

标签： css input autocomplete font-size tailwind-css

【解决方案1】：

编辑：这不再适用于字体大小，并且可能有更多属性向前发展

如何在输入时更改 Chrome 自动完成样式：

input {
    ...
    font-family: $body-font;
    font-size: 1rem;
    font-weight: bold;
    color: #000;
    background-color: #fff;
      
    // Background color
    &:-webkit-autofill {
      -webkit-box-shadow: 0 0 0 1000px #fff inset;
    }
      
    // Font styles
    &:-webkit-autofill::first-line {
      font-family: $body-font;
      font-size: 1rem;
      font-weight: bold;
      // color: green;
    }
}

【讨论】：

是的，这很好用。 &:-webkit-autofill::first-line
在 macOS Chrome 版本 95 上不再为我工作。Chrome 删除自动填充字体样式的原因归结为安全问题 bugs.chromium.org/p/chromium/issues/detail?id=1035058。 ::first-line 是解决他们最初的创可贴“修复”的一个技巧，但他们现在也修复了我们的解决方法。值得注意的是，Chrome 96 将支持 :autofill chromestatus.com/feature/5592445322526720 但我不确定 Chrome 会在多大程度上让我们对其进行样式设置。
再次签到说 :autofill 遗憾地不允许更改字体大小（尚未测试其他字体属性）。
@KerryJohnson 也停止为我工作，:autofill 无济于事，如果您发现字体大小相关的信息，请告诉我。

【解决方案2】：

我知道这个问题很老，但我找到了这个解决方案，它适用于我的情况：

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
  -webkit-animation: autofill 0s forwards;
  animation: autofill 0s forwards;
}

@keyframes autofill {
  100% {
    background: transparent;
    color: inherit;
    font-size: inherit;
  }
}

@-webkit-keyframes autofill {
  100% {
    background: transparent;
    color: inherit;
    font-size: inherit;
  }
}

如果您不想改变背景或字体颜色，则可以将它们从关键帧中移除。

谢谢！

【讨论】：

【解决方案3】：

这很棘手！我玩过这个

:-internal-autofill-previewed {
  font-size: 22px !important;
}

悬停时闪烁的标记 (|) 会发生变化，但“占位符”仍然相同。 :-internal-autofill-previewed::placeholder 也没有用..

【讨论】：

【解决方案4】：

覆盖用户代理样式有时会很棘手。我发现这篇文章讨论了样式输入自动完成 (https://css-tricks.com/snippets/css/change-autocomplete-styles-webkit-browsers/)，但它与您已经使用的 sn-p 非常相似，它并不能解决您询问的问题。恐怕它可能是我们目前无法设置样式的原生元素的几个部分之一。

另一个类似的问题是，如果您为输入元素设置了固定的背景图像，例如为密码字段设置了锁的图标，然后您使用表单的自动完成功能，背景图像将完全消失，目前无法修复它。这只是我们必须处理的事情之一，并告诉客户这是不可能的。

【讨论】：

【解决方案5】：

似乎字体大小是压倒一切的。您可以尝试使用具有更多层次父方法的样式吗？

【讨论】：

您的意思是将字体大小分配给父元素之一？父母已经有一个更大的默认字体大小。
它可能被继承覆盖。例如：优先级将在 css 中与指定父层次结构有关。即 .parent .child .innerchild{ fontsize : 16px } ---- 这将具有高优先级将覆盖以下样式。 .innerchild{ fontsize : 16 px} ---- 与上面的相比，优先级较低。