CSS自动完成字体大小

Question

CSS自动完成字体大小

cssinputautocompletefont-sizetailwind-css

57

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

我正在使用 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 使用该示例并尝试在电子邮件字段中输入您的电子邮件并查看字体大小。它与字体大小存在相同的问题。

是否有可能修复字体大小问题？

- Patrick Wozniak

先从内联 CSS 中删除 25px 的字体大小... 在你完成这个并测试之后，发布一个更新（说明它是否失败/成功）。 - Rachel Gallen

5

我有同样的问题，似乎没有办法防止字体大小的改变。可能需要将其报告给Chrome作为一个bug... - collimarco

@Ash 我错了。昨天由于某种未知原因，我误读了另一个问题，并认为它是关于如何完全防止自动填充的。我已经删除了我的评论。 - tao

5个回答

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

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

谢谢！

- Vishal

1

这非常棘手！我玩过这个

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

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

- Lumi

0

覆盖用户代理样式有时可能会很棘手。我找到了这篇文章，讲述了如何为输入自动完成样式（https://css-tricks.com/snippets/css/change-autocomplete-styles-webkit-browsers/），但它与您已经使用的非常相似，并且无法解决您提出的问题。恐怕这可能是我们目前无法样式化的本地元素中的几个部分之一。

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

- Stephen M Irving

-5

看起来字体大小被覆盖了。你能试试用更具有层次性的父级样式吗？

- akash edakkalathur

你的意思是将字体大小分配给父元素之一吗？父元素已经有更大的默认字体大小了。 - Patrick Wozniak

它可以被继承覆盖。例如：在指定父级层次结构方面，CSS中的优先级将很重要。也就是说， .parent .child .innerchild{ fontsize : 16px } ---- 这将具有较高的优先级，将覆盖下面的样式。 .innerchild{ fontsize : 16 px} ---- 相对于上面的样式，将具有较低的优先级。 - akash edakkalathur

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- StefanBob · Accepted Answer

编辑：这种方法不再适用于字体大小，未来可能会涉及更多属性

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