49

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

我对所有样式都使用https://tailwindcss.com/。

例如：

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

在此处输入图像描述

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

在此处输入图像描述

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

在此处输入图像描述

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

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;

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

在此处输入图像描述

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

是否可以修复字体大小？

4

5 回答 5

25

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

如何在输入时更改 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;
    }
}
于 2020-08-24T18:31:01.647 回答
3

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

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

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

谢谢！

于 2020-03-17T11:39:14.757 回答
1

这非常棘手！我玩这个

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

悬停时闪烁的标记（ | ）会发生变化，但“占位符”仍然相同.. :-internal-autofill-previewed::placeholder也不起作用..

于 2020-01-06T20:54:33.413 回答
0

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

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

于 2019-12-13T14:34:05.243 回答
-5

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

于 2019-07-25T06:49:42.857 回答