CSS自动完成字体大小

Question

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

我正在将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 使用该示例，尝试将您的电子邮件输入到电子邮件字段中并查看字体大小。字体大小也有同样的问题。

可以固定字体大小吗？

最好的问候，帕特里克

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

Answer 2

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