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

是否可以修复字体大小？

标签： cssinputautocompletefont-sizetailwind-css

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