CSS自动完成字体大小

当从浏览器中悬停自动完成建议时，我不知道如何增加或如何使用预览文本的默认字体大小

我使用的所有样式

例如：

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

这是我悬停其中一个建议的自动完成项目时预览的字体大小：

正如您所看到的，字体大小比第一张图像的小得多

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

input:-webkit自动填充，
输入：-webkit自动填充：悬停，
输入：-webkit自动填充：焦点，
文本区：-webkit自动填充，
文本区域：-webkit自动填充：悬停，
文本区域：-webkit自动填充：焦点，
选择：-webkit自动填充，
选择：-webkit自动填充：悬停，
选择：-webkit自动填充：焦点{
边界：继承；
-webkit文本填充颜色：继承；
-webkit盒阴影：继承；
过渡色：背景色5000秒，进退0秒；
字体大小：继承；
}

最后一个属性

font-size

不起任何作用

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

字体大小：1.125rem！重要的；

我还尝试将字体大小指定为内联样式来修复它，但效果不佳：

实例： 使用该示例，尝试将您的电子邮件输入电子邮件字段并查看字体大小。字体大小也有同样的问题

可以修改字体大小吗

致以最良好的祝愿，

---

Patrick

字体大小似乎是最重要的。您可以尝试使用更具层次结构的父级方法的样式吗？

覆盖用户代理样式有时会很棘手。我发现这篇文章讨论了输入自动完成（）的样式，但它与您已经在使用的代码片段非常相似，并且没有解决您所问的问题。恐怕这可能是我们目前无法设计的本地元素的几个部分之一

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

这是非常棘手的！ 我玩过这个

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

悬停时闪烁的标记（|）会发生变化，但“占位符”仍然不变。。

---

：-internal autofill previewed:：placeholder

也不起作用。

我知道这个问题很老，但我找到了这个解决方案，在我的情况下，它是有效的：

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

如果不希望更改背景或字体颜色，则可以将其从关键帧中删除

---

谢谢大家!

如何在输入时更改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;
    }
}

---

您的意思是将字体大小指定给父元素之一？父级已具有更大的默认字体大小。它可能被继承覆盖。例如：在css中，优先级将决定指定父层次结构的优先级。即.parent.child.innerchild{fontsize:16px}----这将具有高优先级，并将覆盖以下样式。innerchild{fontsize:16 px}----的优先级比上面的低。首先从内联css中删除25 px的字体大小。。。在你这样做并测试之后，发布一个更新（说它失败了/成功了）+1我也有同样的问题，似乎没有办法阻止字体大小的改变。也许这应该作为一个bug报告给Chrome…@Ash my bad。由于某种未知的原因，昨天我误读了另一个问题，并认为这是关于如何完全防止自动填充。删除我的评论。是的，这很好<代码>&:-webkit自动填充：：一线